ComponentsFile Uploader

File Uploader

A beautiful drag-and-drop file uploader supporting local accumulation, direct async uploads, image blob thumbnails, and avatar profiles.

React

Native Drag & Drop

Interactive Demo

Toggle through standard forms, avatar profile picture updates, and live-streaming upload progress bars.

Use Case A

Local Multipart Save (Edit Mode)

No active API requests fire during selection. Raw files and kept/deleted server assets are held inside component state and submitted together in a single save transaction.

Use Case B

Direct Remote Streaming (AWS S3 / Storage Nodes)

Instantly streams selected files directly to AWS S3 buckets or remote cloud storage slots, reporting live percentage loaders and success checks before form completion.

S3 Avatar Loader

Triggers live SVG border animation on drop.

Direct S3 File Streamer

Streams multiple document files in parallel uploading tracks.

Stream files directly to S3 Bucket...

Max file size: 10MB • Any file type

Installation

pnpm dlx shadcn@latest add https://micto-ui-kit.misangono.net/r/micto/file-uploader.json

Form File Collection

Allows standard local image or document gathering. Files are saved in state arrays to submit together on form actions.

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

export default function DocumentForm() {
  const [files, setFiles] = useState<File[]>([])
  
  // Track pre-existing server files on edit
  const [existingUrls, setExistingUrls] = useState<string[]>([
    "https://storage.gov.ph/uploads/existing-document.pdf"
  ])

  return (
    <FileUploader 
      value={files} 
      onChange={setFiles} 
      initialUrls={existingUrls}
      onRemoveInitial={(removedUrl) => {
        setExistingUrls(prev => prev.filter(url => url !== removedUrl))
        console.log("Flagged database ID for deletion:", removedUrl)
      }}
      accept={["image/*", "application/pdf"]}
      maxSize={5} 
      multiple 
      placeholder="Upload supporting docs..."
    />
  )
}

Avatar Mode Setup

Saves a single file inside an elegant circular profile settings overlay, perfect for user settings edit screens.

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

export default function ProfileSettings() {
  const [profileFiles, setProfileFiles] = useState<File[]>([])
  
  // Pre-load existing avatar URL or fallback to NH
  const [avatarUrl, setAvatarUrl] = useState<string[]>([
    "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop"
  ])

  return (
    <FileUploader 
      value={profileFiles} 
      onChange={setProfileFiles} 
      initialUrls={avatarUrl}
      onRemoveInitial={() => setAvatarUrl([])}
      fallbackInitials="NH"
      accept={["image/*"]}
      variant="avatar" 
    />
  )
}

API Reference

Configure the component using the following properties.

Prop	Type	Default	Description
value	File[]	[]	The list of raw Files held in the local state (Mode A: Form Mode).
onChange	(files: File[]) => void	undefined	State setter callback triggered when files are chosen or dismissed (Mode A).
onUpload	(file: File, onProgress: (progress: number) => void) => Promise<string>	undefined	Remote uploader handler. If supplied, files are uploaded immediately, tracking progress (Mode B: Remote Mode).
onUploadComplete	(urls: string[]) => void	undefined	Callback triggered with successfully uploaded string URLs when direct uploads finish (Mode B).
initialUrls	string[]	[]	Pre-existing server URLs to display in the uploader queue during Edit scenarios.
onRemoveInitial	(url: string) => void	undefined	Callback triggered when a user deletes a pre-existing server URL, notifying the parent form to delete or unlink it.
multiple	boolean	false	Allows dropping and choosing multiple files concurrently (auto-forces false in avatar mode).
maxFiles	number	10	Maximum file quantity limit cap.
maxSize	number	5	Maximum allowable size limit for a single file in megabytes (MB).
accept	string[]	[]	Supported MIME formats or extension filters, e.g. ['image/*', 'application/pdf'].
variant	'default' \| 'avatar'	'default'	Layout theme. Renders standard dropzone grid or circular bubble profile settings.
fallbackInitials	string	undefined	Circular placeholder typography characters shown when no avatar image or raw local file is present.

PreviousDocumentViewer NextMetric Card