data-transfer-helper

Helper Function for handling DnD DataTransfer Events.

Fetures:

• parse dropped directories via File System Access API or webkitGetAsEntry
• blazing fast generator functions
• small bundle size
• no dependencies
• filter files
• typescript support

Getting started:

install the package:

npm install data-transfer-helper

And use it in your code:

import { parseFilesFromEvent } from "data-transfer-helper";

document.addEventListener("drop", async function (event: DragEvent) {
  event.preventDefault();
  event.stopPropagation();

  const files = await parseFilesFromEvent(event);
});

Options:

filters:

You can provide a filter function to filter the files that are returned.

import { parseFilesFromEvent, dotFileFilter } from "data-transfer-helper";

document.addEventListener("drop", async function (event: DragEvent) {
  event.preventDefault();
  event.stopPropagation();

  const files = await parseFilesFromEvent(event, {
    filters: [dotFileFilter, (file: File) => file.size < 1000000],
  });
  // files will only contain files that are not dot files and are smaller than 1MB
});

addDirectoryName:

You can provide a flag to add directory paths to filenames.

import { parseFilesFromEvent } from "data-transfer-helper";

document.addEventListener("drop", async function (event: DragEvent) {
  event.preventDefault();
  event.stopPropagation();

  const files = await parseFilesFromEvent(event, {
    addDirectoryName: true,
  });
  // files will contain the full path to the file
  // e.g. Downloads/file.txt
});

enableFileSystemAccessAPI

You can provide a flag to enable the experimetal File System Access API.

import { parseFilesFromEvent } from "data-transfer-helper";

document.addEventListener("drop", async function (event: DragEvent) {
  event.preventDefault();
  event.stopPropagation();

  const files = await parseFilesFromEvent(event, {
    enableFileSystemAccessAPI: true,
  });
  // files will fallback to webkitGetAsEntry and getFile()
});