react-muntaha-uploader v1.3.5

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.

FileUploadState

Manages file upload state and actions.

useMuntahaDrop(options: UseMuntahaDropOptions)

A custom React hook for handling file uploads.

Parameters

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