https://github.com/hecht-a/dropzone
https://github.com/hecht-a/dropzone
dropzone npm typescript
Last synced: 3 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/hecht-a/dropzone
- Owner: hecht-a
- Created: 2022-09-10T16:04:56.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-23T07:39:27.000Z (over 3 years ago)
- Last Synced: 2025-09-17T11:21:30.692Z (9 months ago)
- Topics: dropzone, npm, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@hecht-a/dropzone
- Size: 119 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 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)
```