JarCastingFile Selector
A small package for converting a DragEvent or file input to a list of File objects.
Table of Contents
Installation
You can install this package from NPM:
npm add file-selector
Or with Yarn:
yarn add file-selector
CDN
For CDN, you can use unpkg:
https://unpkg.com/file-selector/dist/bundles/file-selector.umd.min.js
The global namespace for file-selector is fileSelector:
const {fromEvent} = fileSelector;
document.addEventListener('drop', async evt => {
const files = await fromEvent(evt);
console.log(files);
});
Usage
ES6
Convert a DragEvent to File objects:
import {fromEvent} from 'file-selector';
document.addEventListener('drop', async evt => {
const files = await fromEvent(evt);
console.log(files);
});
Convert a file input to File objects:
import {fromEvent} from 'file-selector';
const input = document.getElementById('myInput');
input.addEventListener('change', async evt => {
const files = await fromEvent(evt);
console.log(files);
});
CommonJS
Convert a DragEvent to File objects:
const {fromEvent} = require('file-selector');
document.addEventListener('drop', async evt => {
const files = await fromEvent(evt);
console.log(files);
});
Browser Support
Most browser support basic File selection with drag 'n' drop or file input:
For folder drop we use the FileSystem API which has very limited support:
- DataTransferItem.getAsFile()
- DataTransferItem.webkitGetAsEntry()
- FileSystemEntry
- FileSystemFileEntry.file()
- FileSystemDirectoryEntry.createReader()
- FileSystemDirectoryReader.readEntries()
Contribute
If you wish to contribute, please use the following guidelines:
- Use Conventional Commits
- Use
[ci skip]in commit messages to skip a build
