Create Drag & Drop Multiple Files Enabled Input Field using jQuery

@import bourbon
 
// IMPORT
// ---------------------------------------------------------------------
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700)
@import 'bourbon'
 
// BASE
// ---------------------------------------------------------------------
*,
*:before,
*:after
  @include box-sizing(border-box)
 
body,
html
  font-family: 'Montserrat', sans-serif
  font-size: 100%
  font-weight: 400
  background: white
  color: #323a44
  width: 100%
  height: 100%
  margin: 0
  padding: 0
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
 
input:focus,
select:focus,
textarea:focus,
button:focus
  outline: none
 
=center
  margin: auto
  position: absolute
  top: 0
  left: 0
  bottom: 0
  right: 0
 
 
.wrapper
  width: 100%
  height: 100%
 
.drop
  width: 96%
  height: 96%
  border: 3px dashed #DADFE3
  border-radius: 15px
  overflow: hidden
  text-align: center
  background: white
  @include transition(all .5s ease-out)
  +center
 
  /*&:hover
    cursor: pointer
    background: #f5f5f5*/
 
  .cont
    width: 500px
    height: 170px
    color: #8E99A5
    @include transition(all .5s ease-out)
    +center
 
    i
      font-size: 400%
      color: #8E99A5
      position: relative
 
    .tit
      font-size: 400%
      text-transform: uppercase
 
    .desc
      color: #A4AEBB
      line
 
    .browse
      //color: #D2D9DF
      //border-bottom: 1px solid
      margin: 10px 25%
      color: white
      padding: 8px 16px
      border-radius: 5px
      background: #09f
 
  input
    width: 100%
    height: 100%
    cursor: pointer
    background: red
    opacity: 0
    +center
 
#list
  width: 100%
  text-align: left
  position: absolute
  left: 0
  top: 0
 
  .thumb
    height: 75px
    border: 1px solid #323a44
    margin: 10px 5px 0 0

var drop = $("input");
drop.on('dragenter', function (e) {
  $(".drop").css({
    "border": "4px dashed #09f",
    "background": "rgba(0, 153, 255, .05)"
  });
  $(".cont").css({
    "color": "#09f"
  });
}).on('dragleave dragend mouseout drop', function (e) {
  $(".drop").css({
    "border": "3px dashed #DADFE3",
    "background": "transparent"
  });
  $(".cont").css({
    "color": "#8E99A5"
  });
});
 
 
 
function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object
 
  // Loop through the FileList and render image files as thumbnails.
  for (var i = 0, f; f = files[i]; i++) {
 
    // Only process image files.
    if (!f.type.match('image.*')) {
      continue;
    }
 
    var reader = new FileReader();
 
    // Closure to capture the file information.
    reader.onload = (function(theFile) {
      return function(e) {
        // Render thumbnail.
        var span = document.createElement('span');
        span.innerHTML = [', e.target.result,
                          '" title="', escape(theFile.name), '"/>'].join('');
        document.getElementById('list').insertBefore(span, null);
      };
    })(f);
 
    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
  }
}
 
$('#files').change(handleFileSelect);