Drag and Drop

by santosh joshi

HTML

<DIV id="drop">
  <div class="msg-drop">
    <span class="glyphicon glyphicon-cloud-upload cloud"></span> Drop files here or click to <span id="browse">browse</span>.

  </div>

</DIV>
<input id="fileBox" type="file" />
<DIV id="status"></DIV>
<DIV id="list"></DIV>

CSS

body {
  color: #666;
}

#drop {
  border: 1px dashed #ccc;
  width: 450px;
  min-height: 35px;
  margin: 10px auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  display: box;
  cursor: pointer;
}

#status {
  width: 450px;
  margin: 0 auto;
}

#list {
  width: 450px;
  margin: 0 auto;
}

.msg-drop {
  padding: 10px;
}

.thumb {
  width: 33px;
  height: 33px;
  float: left;
  margin: 3.5px;
  border: 1px solid #ccc;
}

.fileCont {
  display: block;
  width: 425px;
  height: 40px;
  margin: 2.5px;
  float: left;
}

.fileSize {
  text-align: right;
  margin: 2.5px;
  font-size: 12px;
  padding-right: 10px;
}

.fileName {
  float: left;
  padding: 2.5px;
  font-weight: 700;
  text-transform: capitalize;
}

.remove {
  width: 20px;
  height: 40px;
  padding-top: 13px;
  font-size: 18px;
  float: left;
}

.progress {
  height: 6px!important;
  width: 380px;
  margin-top: 5px;
}

.progress-bar {
  -webkit-transition: width 1.5s ease-in-out;
  transition: width 1.5s ease-in-out;
}

#fileBox {
  display: none;
}

JavaScript

$(window).load(function() {
  $('#drop').click(function() {
    console.log('click');
    $('#fileBox').trigger('click');
  });
  //Remove item
  $('.fileCont span').click(function() {
    $(this).remove();
  });
});
if (window.FileReader) {
  var drop;
  addEventHandler(window, 'load', function() {
    var status = document.getElementById('status');
    drop = document.getElementById('drop');
    var list = document.getElementById('list');

    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) {
      e = e || window.event; // get window.event if e argument missing (in IE)   
      if (e.preventDefault) {
        e.preventDefault();
      } // stops the browser from redirecting off to the image.

      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 fileCont = document.createElement('div');
          fileCont.className = "fileCont";
          list.appendChild(fileCont);

          var fileNumber = list.getElementsByTagName('img').length + 1;
          status.innerHTML = fileNumber < files.length ? 'Loaded 100% of file ' + fileNumber + ' of ' + files.length + '...' : 'Done loading. processed ' + fileNumber + ' files.';

          var img = document.createElement("img");
          img.file = file;
          img.src = bin;
          img.className = "thumb";
          fileCont.appendChild(img);

          var newFile = document.createElement('div');
          newFile.innerHTML = file.name;
         ...