📁 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-dropzone

Or using yarn:

yarn add react-folder-dropzone

🧪 Quick Start

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

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 💪