Quickstart

Install:

``bash
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:

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

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

Or use as CommonJS module:

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

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

Documentation

$3

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

`js
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 | - |

$3

Events are received with:

`js
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

$3

Remove all the files uploaded in the dropzone.
Use:
`js
const input = document.querySelector('input#id')
const dropzone = new Dropzone(input, {})
dropzone.clearFiles()
`

$3

Set the minimum amount of files.
Use:
`js
const input = document.querySelector('input#id')
const dropzone = new Dropzone(input, {})
dropzone.setMin(2)
`

$3

Set the maximum amount of files.
Use:
`js
const input = document.querySelector('input#id')
const dropzone = new Dropzone(input, {})
dropzone.setMax(5)
``