file-dropzone

A simple lightweight file dropzone component based on jQuery. You can easily make any existing element become a dropzone that holds files.

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
    elem.empty()
    files.forEach(function (item) {
      elem.append('<div class="file-name">' + item.name + '</div>')
    })
  },
  onEnter: function () {
    console.log('enter')
  },
  onLeave: function () {
    console.log('leave')
  },
  onHover: function () {
    console.log('hover')
  },
  onDrop: function () {
    console.log('drop')
  },
  onInvalid: function (files) {
    console.log('file invalid')
    console.log(files)
  },
  beforeAdd: function () {
    return true
  }
})

Construtor

// method 1
var options = {}
new FileDropzone($('#container'), options)

// method 2
var options = { target: '#container' }
new FileDropzone(options)

Options

option	type	explain	default
target	string	css selector string. specifies which element you want to be a dropzone
fileHoverClass	string	class name that will be added to target element when file dragged over it	'dropzone--file-hover'
clickable	boolean	whether the file choosing window will pop up when target element is clicked	true
multiple	boolean	whether the dropzone can hold multiple files	true
noFolder	boolean	whether to filter out folders when dropping	true
unique	boolean	whether to ignore duplicate files when adding	false
forceReplace	boolean	whether to replace the existing file list when adding. If set to false, new files will append to the list	false
accept	string	mimetype or file extensions separated by comma to specify a certain types of files the dropzone accepts
capture	boolean	same as input[type=file] element's capture attribute	true
paramName	string	same as input[type=file] element's name attribute	'file'
onChange	function	called when file list length changed
onEnter	function	called when file dragged enters the target element. accepts 1 argument which is native dragenter event object.
onLeave	function	called when file dragged leaves the target element. accepts 1 argument which is native dragleave event object.
onHover	function	called when file dragged moves on the target element. accepts 1 argument which is native dragover event object.
onDrop	function	called when file dropped into to target element. accepts 1 argument which is native drop event object.
onFolderFound	function	called when on or more folders found among the files user chooses. accepts 1 argument which is an array of the folders (they are also File objects).
onInvalid	function	called when invalid type files found among the files user chooses. accepts 1 argument which is an array of the spotted invalid files.
beforeAdd	function	called right before adding new files to the list. accepts 1 argument which is an array of the valid files that are about to be added to the list. If the function return false, the adding action will be stopped.

Methods

addFiles()

• Store an array of files (File object) into the dropzone.

getFiles()

• Returns an array of files (File object) which are currently in the dropzone.

removeFile(foo)

• args:
  • foo: (File object or Number) if foo is a file which is already in the file list, it will be removed from the list. If foo is a number, the number indicates the index of file that will be removed.
• Returns the removed file if it is removed successfully, otherwise returns null.

pop()

• This method tries to remove the last file from the current file list.
• Returns the removed file or null if the list is empty.

shift()

• This method tries to remove the first file from the current file list.
• Returns the removed file or null if the list is empty.

clearAll()

• This method tries to clear the current file list ,making it an empty array.

openFileChooser()

• This method programmatically opens the file choosing window of os for user to add files.

disable()

• This method disables click and drag&drop to prevent file adding, which is enabled by default.

enable()

• This method does the opposite to disable().

disableClick()

• This method prevent file choosing window of os to pop up on click, which is enabled by default.

enableClick()

• This method does the opposite to disableClick().

static getFileSize(file, unit)

• args:
  • file: (File object) the file whose size you want to get.
  • unit: specifies the unit. It should be one of these: b, kb, mb, gb, tb.
• Returns file size (Number) in the unit specified.
• This is a static method. You should call it on the FileDropzone constructor.

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