JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="dropImg">Accepted formats for DnD (jpeg|png|gif|svg)</div>
<div id="result">dataURI will display here</div>

CSS

#dropImg {
  margin-bottom: 3px;
  padding: 15px;
  background-color: #fff;
  border: dashed 1px #999;
}

#result {
  padding: 15px;
  background-color: #fff;
  border: solid 2px #666;
  overflow: auto;
  max-height: 200px;
  word-break: break-all;
}

JavaScript

var drop = document.getElementById('dropImg');
var result = document.getElementById('result');
drop.addEventListener('dragenter', function(e) {
  e.stopPropagation();
}, false);
drop.addEventListener('dragover', function(e) {
  e.preventDefault();
}, false);
drop.addEventListener('drop', function(e) {
  var file = e.dataTransfer.files[0];
  if( !file.type.match(/image\/(jpeg|png|gif|svg)/)[1]) {
    e.stopPropagation();
    return false;
  }
  
  var reader = new FileReader();
  reader.onload = function(e) {
    var fileContent = reader.result;
    result.innerHTML = fileContent;
  };
    
  reader.readAsDataURL(file);
  e.stopPropagation();
}, false);
document.body.addEventListener('dragover', function(e) {
  e.preventDefault();
}, false);