Quickstart

Install:

npm install --save @hecht-a/dropzone
# or with yarn
yarn add @hecht-a/dropzone
# or with pnpm
pnpm install @hecht-a/dropzone

Use as ES6 module:

import {Dropzone} from '@hecht-a/dropzone'

const input = document.querySelector('input#id')
const dropzone = new Dropzone(input, {})

Or use as CommonJS module:

const {Dropzone} = require('@hecht-a/dropzone')

const input = document.querySelector('input#id')
const dropzone = new Dropzone(input, {})

Documentation

Options

Options are defined in the second argument of the Dropzone constructor in an object.
For example:

const input = document.querySelector('input#id')
const dropzone = new Dropzone(input, {
    id: 'id'
})

All these options are optionnal.

| name | description | type | default value | |:---------------------------------------:|:----------------------------------------------------------------------------------------:|:------------------------------------------------------------------------:|:--------------:| | id | Custom id to apply to the dropzone | string | "dropzone" | | label | Define the label shown on the dropzone | string | "Upload files" | | hoverLabel | Define the label shown on the dropzone when it's hovered | string | "hover" | | min | Define the minimum amount of file(s) to upload (see Dropzone#setMin) | number | 0 | | max | Define the maximum amount of file(s) to upload (see Dropzone#setMax) | number | 2 | | containerTemplate | Define the global template of the dropzone | (max: number, files?: FileList, label?: string, id?: string) => string | - | | fileTemplate | Define the template of the file container when a file is uploaded | (fileName: string) => string | - | | onHover | Define the event hover | () => void | - | | onLeave | Define the event onLeave | () => void | - | | onAddFile | Define the event addFile | (file: File) => void | - | | onAddFiles | Define the event addFiles | (file: FileList) => void | - | | onError | Define the event error | (error: Error) => void | - | | onDrop | Define the event drop | (files: FileList) => void | - | | onDragEnter | Define the event dragEnter | () => void | - | | onDragLeave | Define the event dragLeave | () => void | - | | onDragOver | Define the event dragOver | () => void | - | | onRefreshDropzone | Define the event refreshDropzone | () => void | - | | onRemoveFile | Define the event removeFile | (file: File) => void | - | | onClearDropzone | Define the event clearDropzone | (files: FileList) => void | - |

Events

Events are received with:

dropzone.on('event_name', callback)

where event_name is the name of the targeted event, callback is what you want to execute when the event is received.

hover

Event fired when the mouse is hovering the dropzone.

leave

Event fired when the mouse leave the dropzone area.

addFile

Event fired when a file is uploaded to the dropzone.

addFiles

Event fired when multiple files are uploaded to the dropzone.

onError

Event fired when an error is thrown.

onDrop

Event fired when a file is drop on the dropzone.

onDragEnter

Event fired when the mouse enter on the dropzone are with a file.

onDragLeave

Event fired when the mouse enter on the dropzone area with a file.

onDragOver

Event fired when the mouse is hovering the dropzone with a file.

onRefreshDropzone

Event fired when the dropzone is refreshed.
The dropzone is refresh when:

• one or multiple file(s) is / are uploaded
• a file is removed
• the dropzone is cleared

onRemoveFile

Event fired when a file is removed.

onClearDropzone

Event fired when the dropzone is cleared. See Dropzone#clearDropzone.

Methods

Dropzone#clearDropzone

Remove all the files uploaded in the dropzone. Use:

const input = document.querySelector('input#id')
const dropzone = new Dropzone(input, {})
dropzone.clearFiles()

Dropzone#setMin

Set the minimum amount of files. Use:

const input = document.querySelector('input#id')
const dropzone = new Dropzone(input, {})
dropzone.setMin(2)

Dropzone#setMax

Set the maximum amount of files. Use:

const input = document.querySelector('input#id')
const dropzone = new Dropzone(input, {})
dropzone.setMax(5)