npm package: @hecht-a/dropzone
Description: This is a package to create file dropzone in html
Author: Axel Hecht
Latest version: 1.9.2

## 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

### Options

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](#dropzonesetmin))  |                                  number                                  |       0        |
|                   max                   | Define the maximum amount of file(s) to upload  (see [Dropzone#setMax](#dropzonesetmax)) |                                  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](#hover)            |                                 Define the event `hover`                                 |                               `() => void`                               |       -        |
|            [onLeave](#leave)            |                                Define the event `onLeave`                                |                               `() => void`                               |       -        |
|          [onAddFile](#addfile)          |                                Define the event `addFile`                                |                          `(file: File) => void`                          |       -        |
|         [onAddFiles](#addfiles)         |                               Define the event `addFiles`                                |                        `(file: FileList) => void`                        |       -        |
|           [onError](#onerror)           |                                 Define the event `error`                                 |                         `(error: Error) => void`                         |       -        |
|            [onDrop](#ondrop)            |                                 Define the event `drop`                                  |                       `(files: FileList) => void`                        |       -        |
|       [onDragEnter](#ondragenter)       |                               Define the event `dragEnter`                               |                               `() => void`                               |       -        |
|       [onDragLeave](#ondragleave)       |                               Define the event `dragLeave`                               |                               `() => void`                               |       -        |
|        [onDragOver](#ondragover)        |                               Define the event `dragOver`                                |                               `() => void`                               |       -        |
| [onRefreshDropzone](#onrefreshdropzone) |                            Define the event `refreshDropzone`                            |                               `() => void`                               |       -        |
|      [onRemoveFile](#onremovefile)      |                              Define the event `removeFile`                               |                          `(file: File) => void`                          |       -        |
|   [onClearDropzone](#oncleardropzone)   |                             Define the event `clearDropzone`                             |                       `(files: FileList) => void`                        |       -        |

### Events

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](#dropzonecleardropzone).

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

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

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