Create Drag & Drop Multiple Files Enabled Input Field using jQuery

Create Drag & Drop Multiple Files Enabled Input Field using jQuery
In Default input file field you need to manually you need to choose file images which you need to manually upload. but this jquery script convert your default input file field into Drag & Drop Multiple Files Enabled Input Field which enhance user experience and and your website user can easily drag and drop files which they need to upload.
Drag & Drop Multiple Files Enabled Input Field using jQuery

Libraries

Include the jquery library on page.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" />


HTML

<div class="wrapper">
  <div class="drop">
    <div class="cont">
      <i class="fa fa-cloud-upload"></i>
      <div class="tit">
        Drag & Drop
      </div>
      <div class="desc">
        your files to Assets, or 
      </div>
      <div class="browse">
        click here to browse
      </div>
    </div>
    <output id="list"></output><input id="files" multiple="true" name="files[]" type="file" />
  </div>
</div>

CSS

Styling multiple file select input box with drag and drop.

@import bourbon
 


@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700)
@import 'bourbon'
 


*,
*: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
 
  
 
  .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


      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


JS

Finally addthe below jquery code to make your drag and drop multiple image selection actionable.

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; 
 
  
  for (var i = 0, f; f = files[i]; i++) {
 
    
    if (!f.type.match('image.*')) {
      continue;
    }
 
    var reader = new FileReader();
 
    
    reader.onload = (function(theFile) {
      return function(e) {
        
        var span = document.createElement('span');
        span.innerHTML = ['<img class="thumb" src="', e.target.result,
                          '" title="', escape(theFile.name), '"/>'].join('');
        document.getElementById('list').insertBefore(span, null);
      };
    })(f);
 
    
    reader.readAsDataURL(f);
  }
}
 
$('#files').change(handleFileSelect);

See live demo and download source code.

DEMO
| DOWNLOAD

This awesome script developed by aPinix, Visit their official codepen repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.