file-selector
TypeScript icon, indicating that this package has built-in type declarations

0.6.0 • Public • Published

file-selector

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

npm Tests codecov Open Collective Backers Open Collective Sponsors Contributor Covenant

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 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.

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:

Contribute

If you wish to contribute, please use the following guidelines:

Credits

Support

Backers

Support us with a monthly donation and help us continue our activities. [Become a backer]

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

License

MIT

Package Sidebar

Install

npm i file-selector

Weekly Downloads

3,006,298

Version

0.6.0

License

MIT

Unpacked Size

187 kB

Total Files

31

Last publish

Collaborators

  • rolandjitsu
  • rxmarbles
  • okonet