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)