https://github.com/GoogleChromeLabs/file-drop

A simple file drag and drop custom-element
https://github.com/GoogleChromeLabs/file-drop

drag-and-drop file-upload

Last synced: 4 months ago
JSON representation

A simple file drag and drop custom-element

• Host: GitHub
• URL: https://github.com/GoogleChromeLabs/file-drop
• Owner: GoogleChromeLabs
• License: apache-2.0
• Created: 2018-10-10T18:18:09.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-18T15:47:33.000Z (9 months ago)
• Last Synced: 2024-02-22T18:31:27.333Z (4 months ago)
• Topics: drag-and-drop, file-upload
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/file-drop-element
• Size: 664 KB
• Stars: 225
• Watchers: 11
• Forks: 22
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Lists

• awesome-standalones - `<file-drop>`
• awesome - GoogleChromeLabs/file-drop - A simple file drag and drop custom-element (TypeScript)

README

        
# file-drop Custom Element

The file drop custom element is a simple Custom Element that accepts `File` objects being

dropped on it and fires a dedicated event `onfiledrop` when a successful drop occurs.

## Installation

`npm i file-drop-element`

## Demo

You can try a quick demo of this element on [glitch](https://file-drop-element.glitch.me/).

## Usage

### Directly as a module

Copy from `node_modules` in to a local directory.

```HTML

  Drop file here

```

### Directly as a UMD, for non-ES6 Module supporting browsers

```HTML

  Drop file here

```

### Respond to when a file is dropped on the element

When a user has succesfully dropped a file on to the element, the 

element will emit a `filedrop` event. The `filedrop` event

contains a `file` property which is a direct reference to the `File`

that was dropped.

```HTML

Drop a file here

dropTarget.addEventListener('filedrop', (e) => {

  dropTarget.textContent = e.file.name;

});

```

Note: if more than one file is dropped on the element, only the first file

will be included on the event.

### Only allow certain files to be dropped on the element.

The element will accept any `drop` event that has the `.dataTransfer` object

populated with _any_ file. If you want to control the types of files that 

can be dropped on to the element, use the same syntax that `` elements

use when the `accept` attribute is set, that is:

* `` - any file

* `` - all images

* `` - only Images that have the MIME-type of a PNG.

### Allow multiple files to be dropped

The element can accept multiple files being dropped or pasted on to the element.

By default the element will only accept return the first file if the user drops

multiple files on it. If you want to receive multiple files in the event you can

add the `multiple` attribute to the element.

```HTML

  Drop file here

```

If you add an `accept` attribute alongside the `multiple` element, the

`onfiledrop` event will only trigger if there is at least one file that matches

the criteria. It will return a filtered list of files where each file will match

the value in the `accept` attribute.

```HTML

  Drop file here

```

### Styling

The element is an `inline` display element and it can be controlled like any normal

element. The element does not use Shadow DOM so there are no internal elements

to style.

The element will add two classes `drop-valid` and `drop-invalid` to the element

depending on the mime-type of the file that is currently being dragged over the

element.

```HTML

file-drop.drop-valid {

  background-color: green;

}

file-drop.drop-invalid {

  background-color: red;

}

```