@hecht-a/dropzone
TypeScript icon, indicating that this package has built-in type declarations

1.9.2 • Public • Published

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)

Readme

Keywords

none

Package Sidebar

Install

npm i @hecht-a/dropzone

Weekly Downloads

11

Version

1.9.2

License

none

Unpacked Size

26.8 kB

Total Files

34

Last publish

Collaborators

  • aaxxeell