Drag And Drop Multi-file Upload Plugin - jQuery file-dropzone

file-dropzone is a tiny yet highly customizable jQuery plugin for uploading multiple files to a web server via drag and drop.

It converts any DOM element into a 'dropzone' area. You can select one or multiple files to be uploaded from local by dragging and drop them to the area.

How to use it:

1. Create a DIV element for the dropzone.

<div id="box">
  <div class="files">Files Will Be Displayed Here</div>
</div>

2. Load the minified version of the file-dropzone plugin after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/file-dropzone.js"></script>

3. Call the plugin to initialize the dropzone.

var myDropzone = new FileDropzone({
    target: '#box',
    fileHoverClass: 'entered',
    clickable: true,
    multiple: true,
    forceReplace: false,
    paramName: 'my-file',
    accept: '',
    onChange: function () {
      var files = this.getFiles()
      var elem = this.element.find('.files')
      elem.empty()
      files.forEach(function (item) {
        elem.append('<div class="file-name" data-id="' + item.id + '">' + item.name + '</div>')
      })
    },
    onEnter: function () {
      console.log('enter')
    },
    onLeave: function () {
      console.log('leave')
    },
    onHover: function () {
      console.log('hover')
    },
    onDrop: function () {
      console.log('drop')
    },
    onFolderFound: function (folders) {
      console.log('' + folders.length + ' folders ignored. Change noFolder option to true to accept folders.')
    },
    onInvalid: function (files) {
      console.log('file invalid')
      console.log(files)
    },
    beforeAdd: function (files) {
      for (var i = 0, len = files.length; i < len; i++) {
        let file = files[i]
        file.id = new Date().getTime()
        if (/fuck/.test(file.name)) {
          return false
        }
      }
      return true
    }
})

4. All possible options & event handlers to customize the dropzone.

var myDropzone = new FileDropzone({

    // selector of dropzone
    target: '',

    // css class added to the files on hover
    fileHoverClass: 'dropzone--file-hover',

    // allows the user to click the dropzone to select files
    clickable: true,

    // allows multiple files
    multiple: true,

    // same as input[type=file] element's name attribute
    paramName: 'file',

    // mimetype or file extensions separated by comma
    accept: '',

    // same as input[type=file] element's capture attribute
    capture: false,

    // detects duplicate files
    unique: false,

    // filters out folders when dropping
    noFolder: true,

    // replaces the existing file list when adding
    forceReplace: false,

    // event handlers
    onChange: noop,
    onEnter: noop,
    onLeave: noop,
    onHover: noop,
    onDrop: noop,
    onFolderFound: noop,
    onInvalid: noop,
    beforeAdd: noop
    
})

5. API methods.

var myDropzone = new FileDropzone({

// add an array of files to the dropzone
myDropzone.addFiles()

// gets files in the dropzone
myDropzone.getFiles()

// removes a file from the file list
myDropzone.removeFile(File object or Number)

// removes the last file from the file list
myDropzone.pop()

// removes the first file from the file list
myDropzone.shift()

// clears the file list
myDropzone.clearAll()

// opens the file selector window
myDropzone.openFileChooser()

// disable the plugin
myDropzone.disable()

// enable the plugin
myDropzone.enable()

// disable click
myDropzone.disableClick()

// enable click
myDropzone.enableClick()

// gets the file size
var file = myDropzone.getFiles()[0]
var size = FileDropzone.getFileSize(file, 'mb')

---

This awesome jQuery plugin is developed by Two-Faces. For more Advanced Usages, please check the demo page or visit the official website.