UlmDesign JS Resource

Drag&Drop Image with download Firefox Extension, for You

(function() {
  
  var zoneDrop = document.getElementById('zone-drop');
  zoneDrop.addEventListener("dragover", function(e){
  e.preventDefault();
    
    zoneDrop.setAttribute("class", "over");
    
  
  }, false);

  zoneDrop.addEventListener("drop", function(e){
      e.preventDefault();
    var files = e.dataTransfer.files;
    var fileCount = files.length;
    var i;
    
    if(fileCount > 0) {
      for (i = 0; i < fileCount; i = i + 1) {
        var file = files[i];
        var name = file.name;
        var size = bytesToSize(file.size);
        var type = file.type;
        var reader = new FileReader();
        
        zoneDrop.removeAttribute("class");
        
        reader.onload = function(e) {
        zoneDrop.innerHTML+= '
' + name +', ' + type +', ' + size +' bytes';
        };        
        reader.readAsDataURL(file);
      }
     
    }
    
  }, false);

})();

function bytesToSize(bytes) {
   var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
   if (bytes == 0) return '0 Bytes';
   var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
   return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
};

click here for download