react-muntaha-uploader

A flexible, feature-rich React hook for robust file uploads with drag-and-drop, folder support, validation, progress tracking, abort, and more.

Features

• Drag-and-drop file uploads
• Folder upload (with browser support)
• Single or multiple file selection
• MIME type and file size validation
• Progress tracking for reads
• Abortable reads
• ArrayBuffer support for binary reads
• Keyboard accessibility
• Error handling and callbacks
• Accessible attributes for screen readers

Installation

npm install react-muntaha-uploader
# or
yarn add react-muntaha-uploader

Quick Start

'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 (
    <div
      {...getRootProps()}
      style={{
        border: '2px dashed #aaa',
        padding: 32,
        background: isDragActive ? '#eef' : '#fff',
      }}
    >
      <input {...getInputProps()} />
      <p>
        {isDragActive ? 'Drop files here...' : 'Drag files, or click to select'}
      </p>
      {error && <div style={{ color: 'red' }}>{error}</div>}
      {status === 'reading' && <div>Uploading...</div>}
      {Array.isArray(files) && files.length > 0 && (
        <ul>
          {files.map((file, idx) => (
            <li key={idx}>
              {file.name} ({(file.size / 1024).toFixed(1)} KB)
              <button onClick={() => onDelete(idx)}>Delete</button>
              <span> Progress: {progress[idx] || 0}%</span>
            </li>
          ))}
        </ul>
      )}
      <button onClick={abortUpload}>Abort Upload</button>
      <button onClick={utils.reset}>Reset</button>
    </div>
  )
}

API

useMuntahaDrop<T extends boolean = true>(options?: DropZoneOptions<T>): EnhancedDropZoneState<T>

A React hook for handling file drops with advanced features.

Options (DropZoneOptions<T>)

| 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<T>)

| 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<number,number> | 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 <div>) | | getInputProps | () => DropZoneInputProps | Props for <input type="file" /> (spread onto <input>) | | utils | { getFile, getData, getProgress, reset } | Utility functions |

Utility Functions (from utils)

• 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.
• Full list of supported MIME types here...

Accessibility

• The root dropzone is keyboard accessible (role="button", tabIndex=0).
• ARIA attributes for drag state and errors.
• Input is hidden but accessible to assistive technologies.

License

MIT

Credits

Created and maintained by @jsdev-robin