JSFiddle - React, Tailwind, and code Playground

by Nico D

HTML

<DIV id="status">Drag something</DIV>
<hr>
<DIV id="drop">
  <DIV id="list">
  </DIV>
</DIV>
<hr>
<DIV id="inside"></DIV>

CSS

#drop {
  min-height: 150px;
  width: 250px;
  border: 1px solid blue;
  margin: 10px;
  padding: 10px;
}

JavaScript

// Test per Drag and Drop

if(!window.FileReader) { 
  document.getElementById('status').innerHTML = 'Your browser does not support the HTML5 FileReader.';
} else { 
  var drop; 
  addEventHandler(window, 'load', function() {
    var status = document.getElementById('status');
    drop   = document.getElementById('drop');
    var list   = document.getElementById('list');
    var inside   = document.getElementById('inside');
  	
    function cancel(e) {
      if (e.preventDefault) { e.preventDefault(); }
      return false;
    }
  
    // Tells the browser that we *can* drop on this target
    addEventHandler(drop, 'dragover', cancel);
    addEventHandler(drop, 'dragenter', cancel);

    addEventHandler(drop, 'drop', function (e) {
      // get window.event if e argument missing (in IE)
      e = e || window.event;
      
      // stops the browser from redirecting off to the image.
      if (e.preventDefault) { e.preventDefault(); }

      var dt    = e.dataTransfer;
      var files = dt.files;
      for (var i=0; i<files.length; i++) {
        var file = files[i];
        var reader = new FileReader();
      
        //attach event handlers here...
      
        reader.readAsDataURL(file);
        addEventHandler(reader, 'loadend', function(e, file) {
          var bin           = this.result; 
          var newFile       = document.createElement('div');
          newFile.innerHTML = 'Loaded : '+file.name+' size '+file.size+' B';
          list.appendChild(newFile);  
          var fileNumber = list.getElementsByTagName('div').length;
          status.innerHTML = fileNumber < files.length ? 'Loaded 100% of file ' + fileNumber + ' of ' + files.length + '...' : 'Done loading. processed ' + fileNumber + ' files.';

          inside.innerHTML = bin;
        }.bindToEventHandler(file));

      }
      return false;
    });
      
    Function.prototype.bindToEventHandler = function bindToEventHandler() {
      var handler = this;
      var boundParameters =...