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


Include the jquery library on page.

<script src="//" />


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


Styling multiple file select input box with drag and drop.

@import bourbon

@import url(,700)
@import 'bourbon'

  @include box-sizing(border-box)
  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
  outline: none
  margin: auto
  position: absolute
  top: 0
  left: 0
  bottom: 0
  right: 0
  width: 100%
  height: 100%
  width: 96%
  height: 96%
  border: 3px dashed #DADFE3
  border-radius: 15px
  overflow: hidden
  text-align: center
  background: white
  @include transition(all .5s ease-out)
    width: 500px
    height: 170px
    color: #8E99A5
    @include transition(all .5s ease-out)
      font-size: 400%
      color: #8E99A5
      position: relative
      font-size: 400%
      text-transform: uppercase
      color: #A4AEBB

      margin: 10px 25%
      color: white
      padding: 8px 16px
      border-radius: 5px
      background: #09f
    width: 100%
    height: 100%
    cursor: pointer
    background: red
    opacity: 0
  width: 100%
  text-align: left
  position: absolute
  left: 0
  top: 0
    height: 75px
    border: 1px solid #323a44
    margin: 10px 5px 0 0


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

var drop = $("input");
drop.on('dragenter', function (e) {
    "border": "4px dashed #09f",
    "background": "rgba(0, 153, 255, .05)"
    "color": "#09f"
}).on('dragleave dragend mouseout drop', function (e) {
    "border": "3px dashed #DADFE3",
    "background": "transparent"
    "color": "#8E99A5"
function handleFileSelect(evt) {
  var files =; 
  for (var i = 0, f; f = files[i]; i++) {
    if (!f.type.match('image.*')) {
    var reader = new FileReader();
    reader.onload = (function(theFile) {
      return function(e) {
        var span = document.createElement('span');
        span.innerHTML = ['<img class="thumb" src="',,
                          '" title="', escape(, '"/>'].join('');
        document.getElementById('list').insertBefore(span, null);

See live demo and download source code.


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.