File Uploader

A cross-platform file upload component for Web and React Native with drag & drop support, progress tracking, file validation, and image cropping functionality.

Overview

The File Uploader component provides a comprehensive solution for file uploads across Web and React Native platforms. It includes drag-and-drop support, real-time progress tracking, file validation, image previews, and advanced image cropping capabilities.

Installation

npm

npx shadcn@latest add https://rigidui.com/r/file-uploader.json

React Native Installation

First, ensure you have React Native Reusables properly set up in your project. Follow the complete setup guide at React Native Reusables Installation.

Install the required Expo dependencies:

npm

npx expo install expo-document-picker
npm install @react-native-vector-icons/ant-design

Then install the component:

npx shadcn@latest add https://rigidui.com/r/file-uploader-rn.json

Usage

Web

Preview

import {
  FileUploader,
  FileUploaderDropZone,
  FileUploaderFileList,
  FileUploaderCrop
} from "@/components/file-uploader"

export default function MyComponent() {
  const handleFilesReady = (files) => {
    console.log('Files ready:', files)
    // Handle the uploaded files
    // Example: Create FormData to send to server
    const formData = new FormData()
    files.forEach((file, index) => {
      formData.append(`file-${index}`, file)
    })
    // fetch('/api/upload', { method: 'POST', body: formData })
  }

  return (
    <FileUploader
      maxFiles={5}
      maxSize={1024 * 1024 * 5} // 5MB
      accept={['image/*', 'application/pdf']}
      onFilesReady={handleFilesReady}
      className="w-full max-w-lg"
    >
      <FileUploaderDropZone />
      <FileUploaderFileList enableCropping />
      <FileUploaderCrop
        aspectRatio={16/9}
        minWidth={100}
        minHeight={56}
      />
    </FileUploader>
  )
}

Code

import {
  FileUploader,
  FileUploaderDropZone,
  FileUploaderFileList,
  FileUploaderCrop
} from "@/components/file-uploader"

export default function MyComponent() {
  const handleFilesReady = (files: File[]) => {
    console.log('Files ready:', files)
    // Process files here
  }

  return (
    <FileUploader
      maxFiles={5}
      maxSize={1024 * 1024 * 5}
      accept={['image/*', 'application/pdf']}
      onFilesReady={handleFilesReady}
    >
      <FileUploaderDropZone />
      <FileUploaderFileList enableCropping />
      <FileUploaderCrop aspectRatio={16/9} />
    </FileUploader>
  )
}

React Native

import { FileUploader } from "@/components/file-uploader-rn"
import { useState } from "react"

export default function MyComponent() {
  const [uploadedFiles, setUploadedFiles] = useState([])

  const handleFilesReady = (files) => {
    console.log('Files ready:', files)
    setUploadedFiles(files)
    // Handle the uploaded files
  }

  return (
    <FileUploader
      maxFiles={5}
      maxSize={1024 * 1024 * 5} // 5MB
      accept={['image/*', 'application/pdf']}
      onFilesReady={handleFilesReady}
    />
  )
}

Features

File Selection

Users can select files through native file pickers on both Web and React Native platforms with seamless integration.

Cross-Platform Support

Available for both Web and React Native with platform-specific optimizations and native document picker support.

File Validation

Automatically validates file types, sizes, and counts with customizable restrictions across platforms.

Upload Progress

Real-time progress indicators show upload status with visual feedback for each file (Web platform).

Image Previews

Automatically generates preview thumbnails for uploaded image files with platform-appropriate display.

Multiple Files

Support for uploading multiple files simultaneously with individual progress tracking and management.

File Management

Easy file removal with automatic cleanup and organized file list display.

Image Cropping

Advanced image cropping with aspect ratio controls and customizable crop areas.

API Reference

FileUploader

The main container component that manages file upload state and validation.

onFilesReady · (files: File[]) => void

Callback function called when files are ready or changed.

maxFiles · number · default: "10"

Maximum number of files that can be uploaded.

maxSize · number · default: "10 * 1024 * 1024"

Maximum file size in bytes. Default is 10MB.

accept · string[] · default: "['image/*', 'application/pdf', 'text/*']"

Array of accepted file types (e.g., ['image/*', 'application/pdf']).

className · string

Additional class names for styling the container.

children · React.ReactNode

Child components (FileUploaderDropZone, FileUploaderFileList, etc.).

FileUploaderDropZone

The drag-and-drop zone for file selection.

className · string

Additional class names for styling the drop zone.

disabled · boolean · default: "false"

Whether the drop zone is disabled.

FileUploaderFileList

Displays the list of uploaded files with progress indicators.

className · string

Additional class names for styling the file list.

showHeader · boolean · default: "true"

Whether to show the file list header with count and clear button.

enableCropping · boolean · default: "false"

Enable image cropping functionality for uploaded images.

FileUploaderCrop

Provides image cropping functionality for uploaded images.

aspectRatio · number

Fixed aspect ratio for cropping (e.g., 16/9, 1, 4/3). If undefined, free cropping is allowed.

minWidth · number · default: "50"

Minimum width for the crop area in pixels.

minHeight · number · default: "50"

Minimum height for the crop area in pixels.

TypeScript Interfaces

FileWithPreview

interface FileWithPreview {
  id: string
  file: File
  name: string
  size: number
  type: string
  progress: number
  status: 'uploading' | 'complete' | 'error'
  error?: string | null
  preview?: string | null
  croppedPreview?: string | null
  originalFile?: File
}

FileUploaderProps

interface FileUploaderProps {
  onFilesReady?: (files: File[]) => void
  maxFiles?: number
  maxSize?: number
  accept?: string[]
  className?: string
  children?: React.ReactNode
}

When using the File Uploader with forms, combine it with form validation libraries like Zod for comprehensive file validation and error handling.

Always validate file uploads on the server-side in addition to client-side validation for security purposes.