event-to-files

This package exports an async function getFiles that returns the list of Files retrieved from a change event on file inputs or from a drop event when dragging and dropping files.

Features

• Compatible with change event on <input type="file" />
• Compatible with drag and drop of files and directories
• Returns standard web types (File and FileSystemFileEntry)
• No dependencies
• Tiny: less than 1KB when minified
• ESM only package

Useful resources

• Explore the API on jsDocs.io
• View package contents on unpkg
• View repository on GitHub
• Read the changelog on GitHub

Install

Using npm:

npm add event-to-files

Using yarn:

yarn add event-to-files

Using pnpm:

pnpm add event-to-files

Using bun:

bun add event-to-files

Usage examples

import { getFiles } from "event-to-files";

// For an `<input type="file" />`.
const fileInput = document.getElementById("file-input");
fileInput.addEventListener("change", async (event) => {
	event.preventDefault();
	const files = await getFiles(event);
	for (const { file } of files) {
		console.log(file.name);
	}
});

// For a drag and drop event.
const dropZone = document.getElementById("drop-zone");
dropZone.addEventListener("dragover", (event) => {
	// Cancel the `dragover` event to let the `drop` event fire later.
	event.preventDefault();
});
dropZone.addEventListener("drop", async (event) => {
	event.preventDefault();
	const files = await getFiles(event);
	for (const { file, entry } of files) {
		console.log(file.name);

		// If a directory was dragged and dropped,
		// we can get the file's full path in the directory.
		if (entry?.fullPath) {
			console.log(entry.fullPath);
		}
	}
});

CDN

Use an ESM compatible CDN, for example jsDelivr.

License

MIT

Copyright (c) 2025 Edoardo Scibona

See LICENSE file.