https://github.com/donmccurdy/simple-dropzone

A simple multi-file drag-and-drop input using vanilla JavaScript.
https://github.com/donmccurdy/simple-dropzone

Last synced: 7 days ago
JSON representation

A simple multi-file drag-and-drop input using vanilla JavaScript.

• Host: GitHub
• URL: https://github.com/donmccurdy/simple-dropzone
• Owner: donmccurdy
• License: mit
• Created: 2018-02-22T16:01:34.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2024-10-21T14:45:12.000Z (30 days ago)
• Last Synced: 2024-10-30T06:56:18.507Z (21 days ago)
• Language: JavaScript
• Size: 1.06 MB
• Stars: 69
• Watchers: 9
• Forks: 18
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# simple-dropzone

[![Latest NPM release](https://img.shields.io/npm/v/simple-dropzone.svg)](https://www.npmjs.com/package/simple-dropzone)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/simple-dropzone)](https://bundlephobia.com/package/simple-dropzone)

[![License](https://img.shields.io/npm/l/simple-dropzone.svg)](https://github.com/donmccurdy/simple-dropzone/blob/master/LICENSE)

[![CI](https://github.com/donmccurdy/simple-dropzone/workflows/CI/badge.svg?branch=main&event=push)](https://github.com/donmccurdy/simple-dropzone/actions?query=workflow%3ACI)

A simple drag-and-drop input using vanilla JavaScript.

The library supports supports selection of multiple files, ZIP decoding, and fallback to `` on older browsers.

## Installation

```

npm install --save simple-dropzone

```

## Usage

Create DOM elements for the dropzone and a file input (for compatibility with older browsers). Both may be styled in CSS however you choose.

```html



```

Create a `SimpleDropzone` controller. When files are added, by drag-and-drop or selection with the input, a `drop` event is emitted. This event contains a map of filenames to HTML5 [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects. The file list is flat, although directory structure is shown in the filenames.

```js

dropzone.on('drop', ({files}) => {

  console.log(files);

});

```

Optionally, you may want to set [additional attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#additional_attributes) to configure the file input element, e.g. to allow selection of multiple files.

## API

### SimpleDropzone( `dropEl`, `inputEl` )

Constructor takes two DOM elements, for the dropzone and file input.

```js

const dropEl = document.querySelector('#dropzone');

const inputEl = document.querySelector('#input');

const dropCtrl = new SimpleDropzone(dropEl, inputEl);

```

```html



```

### .on( `event`, `callback` ) : `this`

Listens for `event` and invokes the callback.

```js

dropCtrl.on('drop', ({files}) => {

  console.log(files);

});

```

### .destroy()

Destroys the instance and unbinds all events.

## Events

| Event | Properties | Description |

|---|---|---|

| `drop` | `files : Map, archive?: File` | New files added, from either drag-and-drop or selection. `archive` is provided if the files were extracted from a ZIP archive. |

| `dropstart` |  — | Selection is in progress. Decompressing ZIP archives may take several seconds. |

| `droperror` | `message : string` | Selection has failed. |