Nantes Paradox Market

    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

    Install

    npm i file-selector

    DownloadsWeekly Downloads

    1,771,291

    Version

    0.6.0

    License

    MIT

    Unpacked Size

    187 kB

    Total Files

    31

    Last publish

    Collaborators

    • rolandjitsu
    • rxmarbles
    • okonet