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.

Usage

Upload Files

Drag and drop files here or click to browse

Images

PDF

Max 3 files, up to 5 MB each

file-uploader-demo.tsx

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>
    )

}

file-uploader-demo.tsx

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
    // Example: Upload to server using FormData
  }

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

Installation

Install the File Uploader component for your platform using your preferred package manager.

npx shadcn@latest add @rigidui/file-uploader

Prerequisites

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

Install Dependencies

Install the required Expo dependencies for document picker functionality:

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

Install Component

npx shadcn@latest add @rigidui/file-uploader-rn

Features

The File Uploader component is packed with powerful features designed to provide an exceptional user experience across both Web and React Native platforms.

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.

Props

FileUploader

Prop	Type	Default
`onFilesReady?`	`(files: File[]) => void`	`undefined`
`maxFiles?`	`number`	`10`
`maxSize?`	`number`	`10 * 1024 * 1024 (10MB)`
`accept?`	`string[]`	`['image/', 'application/pdf', 'text/']`
`className?`	`string`	`undefined`
`children?`	`React.ReactNode`	`undefined`

FileUploaderDropZone

Prop	Type	Default
`className?`	`string`	`undefined`
`disabled?`	`boolean`	`false`

FileUploaderFileList

Prop	Type	Default
`className?`	`string`	`undefined`
`showHeader?`	`boolean`	`true`
`enableCropping?`	`boolean`	`false`

FileUploaderCrop

Prop	Type	Default
`aspectRatio?`	`number`	`undefined`
`minWidth?`	`number`	`50`
`minHeight?`	`number`	`50`

Advanced Examples

Explore different configurations and specialized use cases for the File Uploader component across Web and React Native platforms.

Basic File Uploader

Simple file uploader with default settings using the new component-based architecture.

Upload Files

Drag and drop files here or click to browse

Images

PDF

Text files

Max 10 files, up to 10 MB each

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

export default function BasicExample() {
  const handleFilesReady = (files) => {
    console.log('Files ready:', files)
  }

  return (
    <FileUploader
      onFilesReady={handleFilesReady}
      className="w-full max-w-lg mx-auto"
    >
      <FileUploaderDropZone />
      <FileUploaderFileList />
    </FileUploader>
  )
}

Single Image with Cropping

Restrict uploads to a single image file with cropping functionality for profile pictures.

Upload Files

Drag and drop files here or click to browse

Images

Max 1 files, up to 5 MB each

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

export default function SingleImageExample() {
  return (
    <FileUploader
      maxFiles={1}
      accept={['image/*']}
      maxSize={1024 * 1024 * 5}
      onFilesReady={(files) => console.log('Image selected:', files[0])}
      className="w-full max-w-md"
    >
      <FileUploaderDropZone />
      <FileUploaderFileList enableCropping />
      <FileUploaderCrop aspectRatio={1} minWidth={80} minHeight={80} />
    </FileUploader>
  )
}

Complete Upload Flow

Full implementation with file selection, progress tracking, and upload simulation.

Upload Files

Drag and drop files here or click to browse

Images

PDF

Text files

Max 3 files, up to 10 MB each

import {
  FileUploader,
  FileUploaderDropZone,
  FileUploaderFileList
} from "@/components/file-uploader"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

export default function CompleteFlowExample() {
  const [files, setFiles] = useState([])
  const [uploading, setUploading] = useState(false)
  const [uploadStatus, setUploadStatus] = useState('')

  const handleFilesReady = (selectedFiles) => {
    setFiles(selectedFiles)
    setUploadStatus('')
  }

  const handleUpload = async () => {
    if (files.length === 0) return

    setUploading(true)
    setUploadStatus('Uploading...')

    try {
      await new Promise(resolve => setTimeout(resolve, 2000))
      setUploadStatus('Upload completed successfully!')
    } catch (error) {
      setUploadStatus('Upload failed. Please try again.')
    } finally {
      setUploading(false)
    }
  }

  return (
    <div className="space-y-4">
      <FileUploader
        maxFiles={3}
        onFilesReady={handleFilesReady}
      >
        <FileUploaderDropZone />
        <FileUploaderFileList enableCropping />
      </FileUploader>

      {files.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Files Selected</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex flex-wrap gap-2 mb-4">
              {files.map((file, index) => (
                <Badge key={index} variant="secondary">
                  {file.name}
                </Badge>
              ))}
            </div>

            <Button
              onClick={handleUpload}
              disabled={uploading}
            >
              {uploading ? 'Uploading...' : 'Upload Files'}
            </Button>

            {uploadStatus && (
              <p className="mt-2 text-sm">{uploadStatus}</p>
            )}
          </CardContent>
        </Card>
      )}
    </div>
  )
}

Custom Theme

Custom theme effect with backdrop blur and translucent backgrounds.

Upload Files

Drag and drop files here or click to browse

Images

Max 3 files, up to 5 MB each

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

export default function GlassmorphismExample() {
  return (
    <FileUploader
      maxFiles={3}
      accept={['image/*']}
      maxSize={1024 * 1024 * 5}
      onFilesReady={(files) => console.log('Glassmorphism files:', files)}
      className="w-full max-w-lg mx-auto"
    >
      <FileUploaderDropZone
        className="relative backdrop-blur-md bg-white/30 dark:bg-black/30
          border border-white/20 dark:border-white/10 rounded-3xl
          shadow-2xl hover:shadow-3xl transition-all duration-500
          hover:bg-white/40 dark:hover:bg-black/40
          hover:border-white/30 dark:hover:border-white/20"
      />

      <FileUploaderFileList enableCropping className="space-y-2" />
      <FileUploaderCrop aspectRatio={1} />
    </FileUploader>
  )
}

File Uploader

Upload Files

File Selection

Cross-Platform Support

File Validation

Upload Progress

Image Previews

Multiple Files

File Management

Basic File Uploader

Upload Files

Single Image with Cropping

Upload Files

Complete Upload Flow

Upload Files

Custom Theme

Upload Files

On this page