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

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

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

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

• 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.

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

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

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

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

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

• This method does the opposite to disable().

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

• This method does the opposite to disableClick().

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