A small package for converting a DragEvent or file input to a list of File objects.
To install this package:
npm add @stoked-ui/media-selector
yarn add @stoked-ui/media-selector
pnpm add @stoked-ui/media-selectorConvert a DragEvent to File objects:
import FileWithPath from '@stoked-ui/media-selector/FileWithPath';
document.addEventListener('drop', async evt => {
const files = await FileWithPath.from(evt);
console.log(files);
});Convert a change event for an input type file to File objects:
import FileWithPath from '@stoked-ui/media-selector/FileWithPath';
const input = document.getElementById('myInput');
input.addEventListener('change', async evt => {
const files = await FileWithPath.from(evt);
console.log(files);
});Convert FileSystemFileHandle items to File objects:
import FileWithPath from '@stoked-ui/media-selector/FileWithPath';
// Open file picker
const handles = await window.showOpenFilePicker({multiple: true});
// Get the files
const files = await FileWithPath.from(handles);
console.log(files);NOTE The above is experimental and subject to change.
Convert a DragEvent to File objects:
const {fromEvent} = require('@stoked-ui/media-selector');
document.addEventListener('drop', async evt => {
const files = await fromEvent(evt);
console.log(files);
});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()
If you wish to contribute, please use the following guidelines:
- Use Conventional Commits
- Use
[ci skip]in commit messages to skip a build
Support us with a monthly donation and help us continue our activities. [Become a backer]
Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]
MIT