@sec-ant/flat-drop-files

The is a fork of placemark/flat-drop-files with some modifications for it to be align with GoogleChromeLabs/browser-fs-access

The input is a dataTransfer.items list with some optional options, and the output is a normalized list of files, each of which has an optional handle property, which is a FileSystemFileHandle, an optional directoryHandle property, which is a FileSystemDirectoryHandle and a webkitRelativePath property that's a reconstructed relative file path if the file locates in a directory, or an empty string "" otherwise. The behavior of extending the File interface in this module is in consistent with what's done in GoogleChromeLabs/browser-fs-access.

This module takes care of:

- Optionally recursively collecting files within directories
- Reassembling paths of nested files and assigning them to webkitRelativePaths
- Adding file and directory handles to each file if DataTransferItem.getAsFileSystemHandle() is supported
- Auto falling back to FileSystemEntry API when DataTransferItem.getAsFileSystemHandle() is not supported
- Optionally whitelisting file extensions or skipping directories

This module DOES NOT take care of

- Ignoring junk files (You should handle this yourself after you collect the files)

$3

Install from npm:

``bash
yarn add @sec-ant/flat-drop-files
`

Install from GitHub:

`bash
yarn add https://github.com/Sec-ant/flat-drop-files
`

$3

`ts
import { getFilesFromDataTransferItems } from "@sec-ant/flat-drop-files";

const zone = document.getElementById("zone");

zone.addEventListener("dragenter", (e) => {
e.preventDefault();
});

zone.addEventListener("dragover", (e) => {
e.preventDefault();
});

zone.addEventListener("drop", (e) => {
e.preventDefault();
getFilesFromDataTransferItems(e.dataTransfer.items, {
recursive: true,
}).then((files) => {
console.log(files);
});
});
`

$3

`ts
type SkipDirectory = (
e: FileSystemDirectoryEntry | FileSystemDirectoryHandle
) => boolean;

interface DropOptions {
// Set to true to recursively collect files in all subdirectories,
// defaults to false.
recursive?: boolean;
// Callback to determine whether a directory should be entered, return true to skip.
skipDirectory?: SkipDirectory;
// List of allowed file extensions (with leading '.').
extensions?: string[];
}

declare function getFilesFromDataTransferItems(
dataTransferItems: DataTransferItemList,
options?: DropOptions
): Promise;
`

$3

This module is compatible with modern browsers: the baseline is browsers that support webkitGetAsEntry. It does not support IE11 or any other ancient browsers.

$3

The browser-fs-access module is highly recommended to work with the file objects returned by this module: with it, you can write back to the files using the file.handle property or write back to the directories where the files locate using the file.directoryHandle` property.

$3

- placemark/flat-drop-files
- GoogleChromeLabs/browser-fs-access

$3

- Add mimetype filter support