API Reference
The public surface is intentionally tiny: one function and one type.
fromEvent
function fromEvent(evt: Event | any): Promise<(FileWithPath | DataTransferItem)[]>Converts an event (or a list of file-system handles) into a flat list of files.
Accepts one of:
| Input | Source |
|---|---|
A DragEvent | A drop (or other drag) event with a dataTransfer |
A change Event | An <input type="file"> (optionally webkitdirectory) |
An array of FileSystemFileHandle | window.showOpenFilePicker() |
Returns Promise<(FileWithPath | DataTransferItem)[]>:
- For a
dropevent and for file inputs, entries areFileWithPathobjects. Dropped directories are traversed recursively and flattened into the same list. - For non-
dropdrag events (e.g.dragenter/dragover), onlyDataTransferItems are returned, since file data is not yet accessible per the HTML drag-and-drop spec. - Anything unrecognized resolves to an empty array (
[]) rather than throwing.
FileWithPath
Every parsed file is a native File
augmented with its location:
interface FileWithPath extends File {
/** Full path of the file, e.g. `./photos/cat.png`. On Electron this is the absolute path. */
readonly path: string;
/** Path relative to the dropped/selected root, always populated. */
readonly relativePath: string;
}Because it extends File, the standard members (name, size, type, lastModified,
arrayBuffer(), text(), stream(), …) are all available.
import {fromEvent} from 'file-selector';
const files = await fromEvent(evt);
for (const file of files) {
if (file instanceof File) {
console.log(file.path, file.name, file.type, file.size);
}
}