react-filezone

react-filezone

FileFlow is a robust, flexible React file upload library with advanced features and a seamless user experience.

Features

• 🚀 Multiple and single file upload modes
• 📂 File type and size validation
• 📊 Upload progress tracking
• 🔄 Concurrent upload support
• 🛡️ Error handling
• 💻 TypeScript support

Installation

Install the package using npm or yarn:

npm install react-filezone
# or
yarn add react-filezone

Usage

Basic Example

import React from 'react';
import { useUpload } from 'react-filezone';

function FileUploadComponent() {
  const {
    acceptedFiles, 
    errors, 
    getRootProps, 
    getInputProps,
    removeFile
  } = useUpload({
    action: '/upload-endpoint',
    globalConfig: {
      mode: 'multiple',
      maxFiles: 5,
      maxFileSize: 10 * 1024 * 1024, // 10MB
      allowedFileTypes: ['image/*', 'application/pdf']
    }
  });

  return (
    <div>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>Drag and drop files here, or click to select</p>
      </div>
      
      {errors.map((error, index) => (
        <div key={index} style={{color: 'red'}}>{error}</div>
      ))}
      
      {acceptedFiles.map((file) => (
        <div key={file.id}>
          {file.file.name} - {file.state.progress}%
          <button onClick={() => removeFile(file.id)}>Remove</button>
        </div>
      ))}
    </div>
  );
}

Configuration

Global Configuration Options

• mode: 'single' or 'multiple' (default: 'multiple')
• maxFiles: Maximum number of files allowed (default: 3)
• maxFileSize: Maximum file size in bytes (default: 10GB)
• allowedFileTypes: Array of allowed MIME types (default: ['/'])
• maxConcurrentUploads: Maximum concurrent uploads (default: 5)

Hooks and Callbacks

• onUploadStart: Triggered when files start uploading
• onUploadProgress: Called during upload progress
• onUploadComplete: Triggered when upload completes
• onError: Called when an upload fails

API Reference

useUpload(options)

Options

• action: Upload endpoint URL (required)
• globalConfig: Configuration object
• headers: Custom headers for upload request
• metadata: Additional metadata to attach to files

Returns

• acceptedFiles: List of processed files
• errors: Validation and upload errors
• getRootProps(): Props for drag and drop zone
• getInputProps(): Props for file input
• removeFile(fileId): Remove a file from upload queue
• uploadFile(fileId): Manually trigger file upload
• restartUpload(fileId): Restart a failed upload

TypeScript Support

Full TypeScript definitions are included for type safety and IDE support.

License

MIT License