Getting Started

Installation

CDN

For CDN usage, load the ESM build directly from a CDN such as esm.sh or jsDelivr:

<script type="module">
  import {fromEvent} from 'https://esm.sh/file-selector';
 
  document.addEventListener('drop', async evt => {
    const files = await fromEvent(evt);
    console.log(files);
  });
</script>

Usage

From a drag event

Convert a DragEvent to File objects. Dropped directories are traversed recursively and flattened into a single list, with each entry's location preserved on its path property.

import {fromEvent} from 'file-selector';
 
document.addEventListener('drop', async evt => {
  const files = await fromEvent(evt);
  console.log(files);
});

From a file input

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

From file-system handles

Convert FileSystemFileHandle items to File objects:

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

CommonJS

const {fromEvent} = require('file-selector');
 
document.addEventListener('drop', async evt => {
  const files = await fromEvent(evt);
  console.log(files);
});

Suggest changes to this page