@hecht-a/dropzone v1.9.2
Quickstart
Install:
npm install --save @hecht-a/dropzone
# or with yarn
yarn add @hecht-a/dropzone
# or with pnpm
pnpm install @hecht-a/dropzoneUse 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)