Package Exports

file-selector
file-selector/dist/es2015/index.js
file-selector/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (file-selector) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

file-selector

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

Tests

Installation
Usage
Browser Support
Contribute
Credits
Support
License

Installation

You can install this package from NPM:

npm add file-selector

Bundler

If you are using a bundler such as Vite or Webpack you can import the package directly:

import {fromEvent} from 'file-selector';

Browser

To include the package directly in the browser without a bundling step you can choose to either use a CDN, or include the required files in your own project.

CDN

If you want to use a CDN, you can use Skypack, or any other CDN of your choice. Make sure you are specifying a compatible version range to avoid unexpected breaking changes.

<script type="module">
    import {fromEvent} from 'https://cdn.skypack.dev/file-selector@^1.0.0';
</script>

Self-hosted

Self hosting is also possible, make sure to copy or link the contents of the NPM package into your project and import them as you would any other module.

<script type="module">
    import {fromEvent} from './path/to/file-selector.js';
</script>

Import maps

To avoid repeating the import path and get an experience similar to a bundler you can opt to use an import map.

<script type="importmap">
    {
        "imports": {
            // Using the CDN
            "file-selector": "https://cdn.skypack.dev/file-selector@^1.0.0"
            // Or a path to your own self-hosted version.
            "file-selector": "./path/to/file-selector.js"
        }
    }
</script>
<script type="module">
    import {fromEvent} from 'file-selector';
</script>

Usage

Convert a DragEvent to File objects:

import {fromEvent} from 'file-selector';

document.addEventListener('drop', async (event) => {
    const files = await fromEvent(event);
    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 (event) => {
    const files = await fromEvent(event);
    console.log(files);
});

Convert FileSystemFileHandle items to File objects:

import {fromEvent} from 'file-selector';

const handles = await window.showOpenFilePicker({multiple: true});
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 (event) => {
    const files = await fromEvent(event);
    console.log(files);
});