A Simple Lightweight Drag and Drop File Upload jQuery Plugin | file-dropzone

File Upload Drag and Drop – A simple lightweight Dropzone file component based on jQuery. You can easily convert any existing object into a drop zone containing files.

File Drop Zone is a tiny but extremely customizable jQuery plugin for importing a number of information to an internet server by way of drag and drop.

How to make use of it:

1. Create a DIV component for the dropzone.

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

2. Load the minified model 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 attainable choices & 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 strategies.

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')

Drag And Drop Multi-file Upload Plugin, How to upload files using Dropzone Plugin, Drag and Drop Multiple File upload

Options

optiontypeexplaindefault
targetstringcss selector string. specifies which element you want to be a dropzone 
fileHoverClassstringclass name that will be added to the target element when the file dragged over it'dropzone--file-hover'
clickablebooleanwhether the file-choosing window will pop up when the target element is clickedtrue
multiplebooleanwhether the dropzone can hold multiple filestrue
noFolderbooleanwhether to filter out folders when droppingtrue
uniquebooleanwhether to ignore duplicate files when addingfalse
forceReplacebooleanwhether to replace the existing file list when adding. If set to false, new files will append to the listfalse
acceptstringmime type or file extensions separated by a comma to specify certain types of files the dropzone accepts 
capturebooleansame as input[type=file] element’s capture attributetrue
paramNamestringsame as input[type=file] element’s name attribute'file'
onChangefunctioncalled when the file list length changed 
onEnterfunctioncalled when the file dragged enters the target element. accepts 1 argument which is a native dragenter event object. 
onLeavefunctioncalled when the file dragged leaves the target element. accepts 1 argument which is a native dragleave event object. 
onHoverfunctioncalled when the file dragged moves on the target element. accepts 1 argument which is a native dragover event object. 
onDropfunctioncalled when the file dropped into to target element. accepts 1 argument which is a native drop event object. 
onFolderFoundfunctioncalled when one or more folders are found among the files the user chooses. accepts 1 argument which is an array of the folders (they are also File objects). 
onInvalidfunctioncalled when invalid type files are found among the files the user chooses. accepts 1 argument which is an array of the spotted invalid files. 
beforeAddfunctioncalled right before adding new files to the list. accepts 1 argument which is an array of valid files that are about to be added to the list. If the function return false, the adding action will be stopped.

See Demo And Download

Official Website(Two-Faces): Click Here

This superior jQuery/javascript plugin is developed by Two-Faces. For extra Advanced Usage, please go to the official website.

Share