Dropzone-file-parser NPM

Dropzone File Parser

A lightweight utility package for parsing and managing file uploads in drop zones. Simplifies handling complex file uploads, directory traversal, and file system organization using the HTML5 File System API.

Installation

npm install dropzone-file-parser

Features

🎯 Designed for drop zone implementations
🌲 Hierarchical file system structure
📁 Supports files and directories
📊 Automatic size and file tracking
🔄 Asynchronous processing
💪 TypeScript support
⚡ Lightweight (~2KB gzipped)

Usage

import { constructDirectoryNodeList } from 'dropzone-file-parser';

// Basic dropzone setup
const dropZone = document.querySelector('#dropZone');

['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  dropZone.addEventListener(eventName, e => {
    e.preventDefault();
    e.stopPropagation();
  });
});

dropZone.addEventListener('drop', async (event) => {
  const items = event.dataTransfer.items;
  const tree = await constructDirectoryNodeList(items, 'dropped-files');
  
  // Get all files
  const files = tree.getFiles();
  console.log(`Processed ${tree.fileCount} files`);
  
  // Access file data
  files.forEach(node => {
    console.log(`File: ${node.name}, Size: ${node.size} bytes`);
  });
});

API Reference

constructDirectoryNodeList(items, rootId)

Creates a directory tree from dropped files.

items: FileList or DataTransferItemList
rootId: String identifier for root directory
Returns: Promise

DirectoryNode Properties

name: File/directory name
isFile: Boolean
id: Unique identifier
parent: Parent node reference
size: Size in bytes
children: Child nodes (directories only)
fileCount: Number of files in branch
file: File object (files only)

DirectoryTree Properties

root: Root node
fileCount: Total files
getFiles(): Returns all files

Error Handling

try {
  const tree = await constructDirectoryNodeList(items, 'root');
} catch (error) {
  if (error.name === 'SecurityError') {
    console.error('Permission denied');
  } else if (error.name === 'NotFoundError') {
    console.error('File not found');
  } else {
    console.error('Error:', error);
  }
}

React Example

import React from 'react';
import { constructDirectoryNodeList } from 'dropzone-file-parser';

function DropZone() {
  const handleDrop = async (event) => {
    event.preventDefault();
    const items = event.dataTransfer.items;
    const tree = await constructDirectoryNodeList(items, 'react-files');
    const files = tree.getFiles();
    console.log(`Processed ${files.length} files`);
  };

  return (
    <div
      onDragOver={(e) => e.preventDefault()}
      onDrop={handleDrop}
      style={{
        border: '2px dashed #ccc',
        padding: '20px',
        textAlign: 'center'
      }}
    >
      Drop files here
    </div>
  );
}

export default DropZone;