A small package for converting a DragEvent or file input to a list of File objects.

• Installation
• Usage
• Browser Support
• Contribute
• Credits
• Support
• License

You can install this package from NPM:

npm add file-selector

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); });

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 change event for an input type file 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); });

Convert FileSystemFileHandle items to File objects:

import {fromEvent} from 'file-selector'; // Open file picker const handles = await window.showOpenFilePicker({multiple: true}); // Get the files const files = await fromEvent(handles); console.log(files);

NOTE The above is experimental and subject to change.

Convert a DragEvent to File objects:

const {fromEvent} = require('file-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:

• File API
• Drag Event
• DataTransfer
• <input type="file">

For folder drop we use the FileSystem API which has very limited support:

• DataTransferItem.getAsFile()
• DataTransferItem.webkitGetAsEntry()
• FileSystemEntry
• FileSystemFileEntry.file()
• FileSystemDirectoryEntry.createReader()
• FileSystemDirectoryReader.readEntries()

Checkout the organization CONTRIBUTING.md.

• html5-file-selector

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