Preview image with div contenteditable

by Muhamad Sofyan

HTML

<div id="editor" contenteditable="true" placeholder="What's happening?"></div>
<div id="preview"></div>

CSS

#editor {
  width: 98%;
  height: 10vw;
  border: 2px dashed orangered;
  padding: 5px;
  margin: 0px;
}

#preview .thumbnails {
  width: 125px;
  height: 125px;
  background-size: 100% 100%;
  display: inline-block;
  margin: 10px;
  border: 1px solid orangered;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  color: grey;
  display: block;
  /* For Firefox */
}

JavaScript

var editor = document.getElementById("editor");
var preview = document.getElementById("preview");

function addPreview(image){
  preview.innerHTML += '<div class="thumbnails" style="background-image:url(\'' + image.src + '\')"></div>';
  image.remove()
}

editor.addEventListener("drop", function(e) {
  e.stopPropagation();
  e.preventDefault();
  var file = e.dataTransfer.files[0];
  console.log(file)
  if (file.type.match('image*')) {
    var reader = new FileReader();
    reader.onload = (function(theFile) {
      var dataURI = theFile.target.result;
      var image = document.createElement("img");
      image.src = dataURI;
      addPreview(image);
    })
    reader.readAsDataURL(file);
  }
}, false)