mun-react-drop

useMuntahaDrop Hook

Overview

useMuntahaDrop is a custom React hook for handling file uploads via drag-and-drop or input selection. It provides a flexible API to manage file uploads efficiently.

---

AcceptFileTypes

Defines the supported file types for uploads.

Supported Categories

• Images: image/png, image/jpeg, image/svg+xml, etc.
• Videos: video/mp4, video/webm, etc.
• Audio: audio/mp3, audio/wav, etc.
• Documents: application/pdf, text/plain, etc.
• Archives & Compressed Files: application/zip, application/x-rar-compressed, etc.
• Fonts: font/ttf, font/woff2, etc.
• Programming & Code Files: application/javascript, application/x-python-code, etc.

---

FilePayload

Represents the structure of an uploaded file.

Property	Type	Description
buffer	string | ArrayBuffer | null	File data buffer.
alt	string | null	Alternative text for images (optional).
src	string | null	Source URL or base64 data.

---

FileUploadState

Manages file upload state and actions.

Property	Type	Description
onChange	(event: React.ChangeEvent<HTMLInputElement>) => void	Handles file input change event.
inputRef	React.RefObject<HTMLInputElement | null>	Ref for the file input element.
dropRef	React.RefObject<HTMLDivElement | null>	Ref for the drop area element.
onClick	() => void	Triggers the file input click event.
onDrop	(event: React.DragEvent<HTMLDivElement>) => void	Handles file drop event.
onRemove	(index?: number) => void	Removes a file from the list.
error	string | null	Error message if validation fails.
payload	T extends true ? FilePayload[] : FilePayload	Uploaded file(s) data.
dragging	boolean	Indicates if a file is being dragged over the drop area.
progress	number | null	Upload progress percentage (if applicable).

---

useMuntahaDrop(options: UseMuntahaDropOptions)

A custom React hook for handling file uploads.

Parameters

Property	Type	Default	Description
accepts	AcceptFileTypes[]	[]	Allowed MIME types.
minSize	number	undefined	Minimum file size in bytes.
maxSize	number	10MB	Maximum file size in bytes.
maxFiles	number	undefined	Maximum number of files.
multiple	boolean	false	Allows multiple file selection.
disabled	boolean	false	Disables file input.

Usage Example

Single File Upload Example:

import React from 'react'
import { useMuntahaDrop } from 'react-muntaha-uploader'

const SingleFileUpload = () => {
  const {
    onChange,
    inputRef,
    dropRef,
    onClick,
    onDrop,
    onRemove,
    error,
    payload,
    dragging,
  } = useMuntahaDrop({
    accepts: ['image/png', 'image/jpeg'],
    maxSize: 5 * 1024 * 1024, // 5MB
    multiple: false,
  })

  return (
    <div>
      <div
        ref={dropRef}
        onDrop={onDrop}
        onClick={onClick}
        style={{
          border: '2px dashed gray',
          padding: '20px',
          textAlign: 'center',
          cursor: 'pointer',
          backgroundColor: dragging ? '#f0f0f0' : 'white',
        }}
      >
        Drag & Drop an image or click to upload
      </div>

      <input
        ref={inputRef}
        type="file"
        onChange={onChange}
        style={{ display: 'none' }}
      />

      {error && <p style={{ color: 'red' }}>{error}</p>}

      {payload?.src && (
        <div>
          <img src={payload.src} alt={payload.alt || 'Preview'} width={100} />
          <button onClick={onRemove}>Remove</button>
        </div>
      )}
    </div>
  )
}

export default SingleFileUpload

Multiple File Upload Example:

import React from 'react'
import { useMuntahaDrop } from 'react-muntaha-uploader'

const MultiFileUpload = () => {
  const {
    onChange,
    inputRef,
    dropRef,
    onClick,
    onDrop,
    onRemove,
    error,
    payload,
    dragging,
  } = useMuntahaDrop({
    accepts: ['image/png', 'image/jpeg', 'application/pdf'],
    maxSize: 5 * 1024 * 1024, // 5MB
    maxFiles: 5,
    multiple: true,
  })

  return (
    <div>
      <div
        ref={dropRef}
        onDrop={onDrop}
        onClick={onClick}
        style={{
          border: '2px dashed gray',
          padding: '20px',
          textAlign: 'center',
          cursor: 'pointer',
          backgroundColor: dragging ? '#f0f0f0' : 'white',
        }}
      >
        Drag & Drop files here or click to upload
      </div>

      <input
        ref={inputRef}
        type="file"
        multiple
        onChange={onChange}
        style={{ display: 'none' }}
      />

      {error && <p style={{ color: 'red' }}>{error}</p>}

      {Array.isArray(payload) && payload.length > 0 && (
        <ul>
          {payload.map((file, index) => (
            <li key={index}>
              {file.src && (
                <img src={file.src} alt={file.alt || 'Preview'} width={50} />
              )}
              <button onClick={() => onRemove(index)}>Remove</button>
            </li>
          ))}
        </ul>
      )}
    </div>
  )
}

export default MultiFileUpload