Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 6 days 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 (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-05-02T05:45:30.000Z (6 months ago)
- Last Synced: 2024-09-19T02:27:35.192Z (about 2 months ago)
- Topics: drag-and-drop, file-upload
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/file-drop-element
- Size: 728 KB
- Stars: 232
- Watchers: 11
- Forks: 21
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- 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;
}
```