maechabin/photoeditor.css

## photoeditor.css
#cb-drag {
  margin-bottom: 8px;
  padding: 24px 0;
  text-align: center;
  background-color: #E3F2FD;
  border: 4px dotted #3F51B5;
}
#cb-drag p {
  color: #1E88E5;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
  margin-bottom: 16px;
}
#cb-file {
  cursor: pointer;
}
#cb-display {
  margin-bottom: 0;
}
#cb-display p {
  margin-top: 8px;
  margin-bottom: 0;
  line-height: 1.4;
}
.cb-div {
  padding: 16px;
  border: 1px solid #eee;
  margin-bottom: 8px;
  background-color: #fafafa;
}
.cb-image {
  cursor: pointer;
  border: 4px solid #222;
}

## photoeditor.html
<!doctype html>

<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="photoeditor.css">
  <script src="http://feather.aviary.com/imaging/v2/editor.js"></script>
</head>

<body>
<div>
  <div id="cb-drag">
  <p>ここに画像ファイルをドラッグ<br>（複数可能）</p>
  <input type="file" id="cb-file" multiple>
  </div>
  <div id="cb-display"></div>
</div>

<script src="photoeditor.js"></script>
</body>

</html>

## photoeditor.js
var dragAndDrop = (function (window, document) {

  "use strict";

  var drag = document.getElementById("cb-drag");
  var disp = document.getElementById("cb-display");
  var file = document.getElementById("cb-file");

  function makeView(data) {

    var div, img, customEvent;
    var metaData = "<p>■ファイル名: <b>" + data.name + "</b><br>■容量: <b>" + data.size + "</b>バイト</p>";

    div = document.createElement("div");
    div.setAttribute("class", "cb-div");

    img = document.createElement("img");
    img.src = data.url;
    img.setAttribute("class", "cb-image");
    img.style.maxWidth = "100%";
    img.style.height = "auto";

    div.appendChild(img);
    img.insertAdjacentHTML("afterend", metaData);
    disp.appendChild(div);

    customEvent = document.createEvent("HTMLEvents");
    customEvent.initEvent("makeView", true, false);
    div.dispatchEvent(customEvent);

  }

  function readImage(e) {

    var f = (e.dataTransfer) ? e.dataTransfer.files : e.target.files;

    for (var i = 0, l = f.length; i < l; i++) {

      var reader = new FileReader();

      reader.onload = (function (f) {

        var imageData = {};

        return function (evt) {

          if (f.type === "image/gif" || f.type === "image/png" || f.type === "image/jpeg") {

            imageData.type = f.type;
            imageData.name = f.name;
            imageData.size = f.size;
            imageData.date = f.lastModifiedDate.toLocaleDateString();
            imageData.url = evt.target.result;
            makeView(imageData);

          } else {
            return;
          }

        };

      })(f[i]);

      reader.readAsDataURL(f[i]);

    }

  }

  function dragFiles() {

    drag.addEventListener("drop", function (e) {
      e.stopPropagation();
      e.preventDefault();
      readImage(e);
    }, false);

    drag.addEventListener("dragover", function (e) {
      e.stopPropagation();
      e.preventDefault();
    }, false);

  }

  function uploadFiles() {

    file.addEventListener("change", function(e) {
      readImage(e);
    }, false);

  }

  return {
    init: function () {
      dragFiles();
      uploadFiles();
    }
  };

})(this, this.document);

var photoEditor = (function (window, document) {

  "use strict";

  var featherEditor = new Aviary.Feather({
    apiKey: "xxxxxxxxxxxxxxx",
    onSave: function(imageID, newURL) {
      var img1 = document.getElementById(imageID);
      img1.src = newURL;
    }
  });

  function clearImage() {
    this.parentNode.style.display = "none";
  }

  function launchEditor(id, src) {
    featherEditor.launch({
      image: id,
      url: src
    });
    return false;
  }

  function editPhoto() {
    //console.log(this);
    var id = this.getAttribute("id");
    var src = this.getAttribute("src");
    launchEditor(id, src);
  }

  function makeButton() {
    var button = document.createElement("button");
    button.setAttribute("style",
      "width: 64px;"
      + " line-height: 24px;"
      + " background-color: #37474F;"
      + " color: #fff;"
      + " border: none;"
      + " cursor: pointer;"
      + " border-radius: 2px;"
      + " font-size: 14px;"
      + " position: absolute;"
      + " text-align: center;"
      + " top: 16px;"
      + " right: 8px;"
      + " padding: 0;"
      + " z-index: 1000;"
    );
    button.innerHTML = "削除";
    return button;
  }

  function listener() {

    var disp = document.getElementById("cb-display");

    disp.addEventListener("makeView", function () {

      var image = document.querySelectorAll(".cb-image");
      var button = [];

      for (var i = 0, l = image.length; i < l; i++) {

        button[i] = makeButton();
        image[i].setAttribute("id", "cb-image_" + i);
        image[i].parentNode.style.position = "relative";
        image[i].parentNode.appendChild(button[i]);

        button[i].addEventListener("click", clearImage, false);
        image[i].addEventListener("click", editPhoto, false);
      }

    }, false);

  }

  return {
    init: function () {
      listener();
    }
  };

})(this, this.document);

dragAndDrop.init();
photoEditor.init();
	#cb-drag {
	margin-bottom: 8px;
	padding: 24px 0;
	text-align: center;
	background-color: #E3F2FD;
	border: 4px dotted #3F51B5;
	}
	#cb-drag p {
	color: #1E88E5;
	font-weight: bold;
	text-align: center;
	line-height: 1.4;
	margin-bottom: 16px;
	}
	#cb-file {
	cursor: pointer;
	}
	#cb-display {
	margin-bottom: 0;
	}
	#cb-display p {
	margin-top: 8px;
	margin-bottom: 0;
	line-height: 1.4;
	}
	.cb-div {
	padding: 16px;
	border: 1px solid #eee;
	margin-bottom: 8px;
	background-color: #fafafa;
	}
	.cb-image {
	cursor: pointer;
	border: 4px solid #222;
	}
	<!doctype html>

	<html>

	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="photoeditor.css">
	<script src="http://feather.aviary.com/imaging/v2/editor.js"></script>
	</head>

	<body>
	<div>
	<div id="cb-drag">
	<p>ここに画像ファイルをドラッグ<br>（複数可能）</p>
	<input type="file" id="cb-file" multiple>
	</div>
	<div id="cb-display"></div>
	</div>

	<script src="photoeditor.js"></script>
	</body>

	</html>
	var dragAndDrop = (function (window, document) {

	"use strict";

	var drag = document.getElementById("cb-drag");
	var disp = document.getElementById("cb-display");
	var file = document.getElementById("cb-file");

	function makeView(data) {

	var div, img, customEvent;
	var metaData = "<p>■ファイル名: <b>" + data.name + "</b><br>■容量: <b>" + data.size + "</b>バイト</p>";

	div = document.createElement("div");
	div.setAttribute("class", "cb-div");

	img = document.createElement("img");
	img.src = data.url;
	img.setAttribute("class", "cb-image");
	img.style.maxWidth = "100%";
	img.style.height = "auto";

	div.appendChild(img);
	img.insertAdjacentHTML("afterend", metaData);
	disp.appendChild(div);

	customEvent = document.createEvent("HTMLEvents");
	customEvent.initEvent("makeView", true, false);
	div.dispatchEvent(customEvent);

	}

	function readImage(e) {

	var f = (e.dataTransfer) ? e.dataTransfer.files : e.target.files;

	for (var i = 0, l = f.length; i < l; i++) {

	var reader = new FileReader();

	reader.onload = (function (f) {

	var imageData = {};

	return function (evt) {

	if (f.type === "image/gif" \|\| f.type === "image/png" \|\| f.type === "image/jpeg") {

	imageData.type = f.type;
	imageData.name = f.name;
	imageData.size = f.size;
	imageData.date = f.lastModifiedDate.toLocaleDateString();
	imageData.url = evt.target.result;
	makeView(imageData);

	} else {
	return;
	}

	};

	})(f[i]);

	reader.readAsDataURL(f[i]);

	}

	}

	function dragFiles() {

	drag.addEventListener("drop", function (e) {
	e.stopPropagation();
	e.preventDefault();
	readImage(e);
	}, false);

	drag.addEventListener("dragover", function (e) {
	e.stopPropagation();
	e.preventDefault();
	}, false);

	}

	function uploadFiles() {

	file.addEventListener("change", function(e) {
	readImage(e);
	}, false);

	}

	return {
	init: function () {
	dragFiles();
	uploadFiles();
	}
	};

	})(this, this.document);

	var photoEditor = (function (window, document) {

	"use strict";

	var featherEditor = new Aviary.Feather({
	apiKey: "xxxxxxxxxxxxxxx",
	onSave: function(imageID, newURL) {
	var img1 = document.getElementById(imageID);
	img1.src = newURL;
	}
	});

	function clearImage() {
	this.parentNode.style.display = "none";
	}

	function launchEditor(id, src) {
	featherEditor.launch({
	image: id,
	url: src
	});
	return false;
	}

	function editPhoto() {
	//console.log(this);
	var id = this.getAttribute("id");
	var src = this.getAttribute("src");
	launchEditor(id, src);
	}

	function makeButton() {
	var button = document.createElement("button");
	button.setAttribute("style",
	"width: 64px;"
	+ " line-height: 24px;"
	+ " background-color: #37474F;"
	+ " color: #fff;"
	+ " border: none;"
	+ " cursor: pointer;"
	+ " border-radius: 2px;"
	+ " font-size: 14px;"
	+ " position: absolute;"
	+ " text-align: center;"
	+ " top: 16px;"
	+ " right: 8px;"
	+ " padding: 0;"
	+ " z-index: 1000;"
	);
	button.innerHTML = "削除";
	return button;
	}

	function listener() {

	var disp = document.getElementById("cb-display");

	disp.addEventListener("makeView", function () {

	var image = document.querySelectorAll(".cb-image");
	var button = [];

	for (var i = 0, l = image.length; i < l; i++) {

	button[i] = makeButton();
	image[i].setAttribute("id", "cb-image_" + i);
	image[i].parentNode.style.position = "relative";
	image[i].parentNode.appendChild(button[i]);

	button[i].addEventListener("click", clearImage, false);
	image[i].addEventListener("click", editPhoto, false);
	}

	}, false);

	}

	return {
	init: function () {
	listener();
	}
	};

	})(this, this.document);

	dragAndDrop.init();
	photoEditor.init();