JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="viewBox">Preview screen</div>

<div id="dropImg" ondragover="onDragOver(event);" ondrop="onDrop(event);" ondragenter="onDragEnter(event);" ondragleave="onDragLeave(event);">
Drop image here to store in localStorage
<!-- /#dropImg --></div>

<input type="button" onclick="clearImg();" value="Clear" />

CSS

#dropImg {
  margin-bottom: 10px;
  padding: 6px;
  border: dotted 1px #f00;
  -webkit-transition: background-color 0.2s ease-in-out;
}
#dropImg.hover {
  background-color: #ffa;
}

#viewBox {
  white-space: nowrap;
  overflow: auto;
  margin-bottom: 10px;
  padding: 3px;
  border: solid 1px #eee;
}
#viewBox img {
  margin-right: 10px;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;  
  transition: all 0.2s ease-in-out;
  -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, color-stop(0.6, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.3)));
}
#viewBox img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

JavaScript

// forked from edo_m18's "FileAPIを試してみる(Drag&Drop)" http://jsdo.it/edo_m18/fRhC
function onDrop(e) {
   var files = e.dataTransfer.files;
   var fileList = [];
   for( var i=0; i<files.length; i++ ) {
     if(files[i].type.match(/image\/(jpeg|png|gif)/)[1]) {
       fileList.push(files[i]);
     }
   }
   if( fileList.length == 0 ) {
       e.stopPropagation();
       return false;
   }
   
   var readers = [];
   var viewer = document.getElementById('viewBox');
   for( var f=0; f<fileList.length; f++ ) {
     readers[f] = new FileReader();
     readers[f].onload = (function() {
       var num = f;
       return function() {
         var fileContent = readers[num].result;
         var img = new Image();
         if( viewer.innerHTML == '画像がプレビューされます。' ) viewer.innerHTML = '';
         viewer.appendChild(img);
         var index = viewer.childNodes.length;
         img.id = 'img'+index;
         bindEvent(img);
         img.src = fileContent;
         if( window.localStorage.images ) {
           var data = JSON.parse(window.localStorage.images);
           data.img.push(fileContent);
           window.localStorage.images = JSON.stringify(data);
         } else {
           window.localStorage.images = JSON.stringify({img:[fileContent]});
         }
       }
     })(f);
     readers[f].readAsDataURL(fileList[f]);
   }
   
   e.stopPropagation();
}

function onDragEnter(e) {
  e.target.className = 'hover';
  e.stopPropagation();
}
function onDragLeave(e) {
  e.target.className = '';  
}

function onDragOver(e) {
  e.preventDefault();
}

function bindEvent(obj) {
  obj.setAttribute('draggable',true);
  obj.addEventListener('dragstart', function(e) {
    e.dataTransfer.setData('text/plain', this.id);
  }, false);
  obj.addEventListener('dragover', function(e) {
    e.preventDefault();
  }, false);
  obj.addEventListener('drop', function(e) {
    var id = e.dataTransfer.getData('text/plain');
    var img = document.getElementById(id);
   ...