Package Exports

react-folder-dropzone
react-folder-dropzone/dist/uploader.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-folder-dropzone) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

📁 React Folder Image Uploader

A flexible React component to upload images and folders with support for drag & drop, file previews, and folder hierarchy.

✅ Upload entire folders
✅ Preserves relative paths
✅ Drag & Drop support
✅ No dependencies beyond React

🚀 Installation

npm install react-folder-image-uploader

Or using yarn:

yarn add react-folder-image-uploader

🧪 Quick Start

import React, { useState } from 'react';
import Uploader from 'react-folder-image-uploader';

const App = () => {
  const [files, setFiles] = useState([]);

  const handleUploadComplete = (uploadedFiles) => {
    setFiles(uploadedFiles);
    console.log('Files received:', uploadedFiles);
  };

  return (
    <div className="max-w-xl mx-auto p-6">
      <Uploader onUploadComplete={handleUploadComplete} />
    </div>
  );
};

export default App;

🔧 Props Reference

Prop Name	Type	Default Value	Description
`onUploadComplete`	`Function`	`undefined`	Callback triggered with all processed files
`fileTypes`	`String`	`'image/*'`	Accept only specific MIME types
`showButtons`	`Boolean`	`true`	Toggle visibility of file/folder buttons
`dragLabel`	`String`	`'Drag & drop your images or folders here'`	Label inside the drag-and-drop box
`buttonLabels`	`Object`	`{ file: 'Upload Files', folder: 'Upload Folder' }`	Custom text for upload buttons
`containerClass`	`String`	`''`	Custom container CSS/Tailwind class
`dragClass`	`String`	`''`	Custom class for drag-and-drop box

📤 Output Format

The onUploadComplete callback receives an array of file objects:

[
  {
    name: 'image.jpg',
    type: 'image/jpeg',
    relativePath: 'photos/image.jpg',
    url: 'blob:http://localhost/abc-xyz'
  },
  ...
]

relativePath: Full path including folder names
url: A blob URL to preview or use in the browser

🧱 Folder Drag-and-Drop Support

✅ Folder uploads supported using:

webkitdirectory input
Drag-and-drop entries using webkitGetAsEntry

⚠️ Firefox does not support folder drag uploads due to browser limitations.

🎨 Styling Example

<Uploader
  dragClass="bg-green-50 border-green-400"
  containerClass="bg-white p-6 shadow-md rounded"
/>

Use Tailwind or your own class names.

📦 Package Structure

react-folder-image-uploader/
├── dist/              # Compiled library files
├── src/
│   └── Uploader.js    # Main component
├── package.json
├── vite.config.js
└── README.md

🛠 Build for Publishing

Install dev dependencies:

npm install

Then run:

npm run build

Bundled output will be saved to the dist/ folder.

📜 License

🙋‍♀️ Author

Made with ❤️ by Faizul Hassan Rhine GitHub: [https://github.com/FaizulHassan-Rhine]

📬 Contributions

Feel free to open issues or submit pull requests! Let’s improve it together 💪