React Dropzone Uploader June

A React file dropzone and uploader component with full customization, progress indicators, upload cancellation and restart, zero dependencies and excellent TypeScript support.

Installation

npm install react-dropzone-uploader-june

Usage

import React from 'react'
import { Dropzone } from 'react-dropzone-uploader-june'

function App() {
  const getUploadParams = ({ meta }) => {
    return { url: 'https://httpbin.org/post' }
  }

  const handleChangeStatus = ({ meta, file }, status) => {
    console.log(status, meta, file)
  }

  const handleSubmit = (files, allFiles) => {
    console.log(files.map(f => f.meta))
    allFiles.forEach(f => f.remove())
  }

  return (
    <Dropzone
      getUploadParams={getUploadParams}
      onChangeStatus={handleChangeStatus}
      onSubmit={handleSubmit}
      accept="image/*,audio/*,video/*"
      maxFiles={10}
      multiple={true}
      canCancel={true}
      canRemove={true}
      canRestart={true}
      inputContent="Drop Files (Custom Input Message)"
      inputWithFilesContent="Add More Files"
      submitButtonDisabled={false}
      submitButtonContent="Submit Files"
    />
  )
}

export default App

Features

• Drag & Drop: Full HTML5 drag and drop support
• File Validation: File type, size, and custom validation
• Progress Tracking: Real-time upload progress
• Customizable UI: Fully customizable components and styling
• TypeScript Support: Complete TypeScript definitions
• Zero Dependencies: No external dependencies required
• Upload Control: Cancel, restart, and remove uploads
• Multiple Files: Support for single or multiple file uploads

Components

• Dropzone: Main component
• Layout: Layout wrapper component
• Input: File input component
• Preview: File preview component
• SubmitButton: Submit button component

License

MIT