A lightweight React file uploader with TypeScript support and customizable UI.
npm install react-muntaha-uploaderbash
npm install react-muntaha-uploader
or
yarn add react-muntaha-uploader
`
Quick Start
`jsx
'use client'
import React from 'react'
import { useMuntahaDrop } from 'react-muntaha-uploader'
export default function MyUploader() {
const {
files,
progress,
error,
isDragActive,
onDelete,
abortUpload,
getRootProps,
getInputProps,
status,
utils,
} = useMuntahaDrop({
accept: ['image/*', 'application/pdf'],
maxSize: 5 1024 1024, // 5MB
multiple: true,
isArrayBuffer: false,
onDrop: (files) => {
console.log('Files dropped:', files)
},
onError: (err) => {
if (err) alert(err)
},
enableFolderUpload: true,
})
return (
{...getRootProps()}
style={{
border: '2px dashed #aaa',
padding: 32,
background: isDragActive ? '#eef' : '#fff',
}}
>
{isDragActive ? 'Drop files here...' : 'Drag files, or click to select'}
{error && {error}}
{status === 'reading' && Uploading...}
{Array.isArray(files) && files.length > 0 && (
{files.map((file, idx) => (
-
{file.name} ({(file.size / 1024).toFixed(1)} KB)
Progress: {progress[idx] || 0}%
))}
)}
---
API
$3
A React hook for handling file drops with advanced features.
#### Options (DropZoneOptions)
| Name | Type | Default | Description |
| -------------------- | ---------------------- | ------- | --------------------------------------------------------- |
| accept | MimeType[] | ['*'] | Allowed mime types (see below for all values) |
| minSize | number | — | Minimum file size in bytes |
| maxSize | number | — | Maximum file size in bytes |
| maxFiles | number | — | Max files allowed (only for multiple: true) |
| multiple | boolean | true | Allow multiple file selection |
| disabled | boolean | false | Disable the dropzone |
| isArrayBuffer | boolean | false | If true, reads files as ArrayBuffer instead of File |
| onDrop | (files) => void | — | Called when files are dropped or selected |
| onError | (err: string\| null) | — | Called on error events |
| enableFolderUpload | boolean | false | Allow selecting entire folders (browser support required) |
| enableKeyboard | boolean | true | Enable keyboard navigation for dropzone |
#### Return Value (EnhancedDropZoneState)
| Name | Type | Description |
| --------------- | --------------------------------------------- | --------------------------------------------------------- |
| files | File[] or File\| null | Current file(s) |
| arrayBuffer | ArrayBuffer[] or ArrayBuffer\| null | Read file data (when isArrayBuffer: true) |
| progress | number or Record | Upload progress per file or overall |
| error | string \| null | Error message, if any |
| isDragActive | boolean | If a file is currently being dragged over the dropzone |
| onDelete | (index?: number) => void | Remove a file by index or all |
| abortUpload | () => void | Abort all current uploads |
| status | 'idle' \| 'reading' \| 'aborted' \| 'error' | Current upload status |
| getRootProps | () => DropZoneRootProps | Props for root dropzone element (spread onto ) |
| getInputProps | () => DropZoneInputProps | Props for (spread onto ) |
| utils | { getFile, getData, getProgress, reset } | Utility functions |
---
$3
- getFile(index?: number): Get file(s) by index or all.
- getData(index?: number): Get ArrayBuffer(s) by index or all.
- getProgress(index?: number): Get progress by index or all.
- reset(): Reset input and state.
---
MIME Type List
accept can be any of:
- image/, video/, audio/*, application/pdf, application/zip`, etc.