A flexible React/TypeScript file uploader supporting images and arbitrary files, with progress tracking, error handling, and avatar/image preview. Integrates with custom endpoints or upload handlers, and supports sequential or parallel uploads.

Source Files

Uploader.tsx: Main component. Handles file selection, validation, upload logic, progress display, error messages, avatar/image preview, and custom entry rendering. Uses hooks and memoization for performance.
useUpload.ts: Custom React hook for managing upload state, progress, results, and clearing files. Supports both endpoint-based and handler-based uploads, with sequential/parallel logic and progress simulation.
utils.ts: Utility functions for file key generation, image type detection, and byte conversion (e.g., "5mb" → bytes).
types.ts: TypeScript interfaces for uploader props, upload results, file metadata, and handler signatures. Integrates with shared types from @armco/types and @armco/shared-components.

Key Features

File Selection: Accepts single or multiple files, with configurable type and count limits.
Image Preview: Avatar/image preview for image uploads, with support for circle/rect variants.
Progress Tracking: Shows upload progress, completion, and error states per file.
Custom Handlers: Supports custom upload handlers or HTTP endpoints.
Sequential/Parallel Uploads: Configurable upload mode for batch or stepwise uploads.
Error Handling: Displays error messages for failed uploads, invalid file types, or size limits.
Custom Entry Rendering: Allows custom rendering of uploaded file entries via uploadEntryRenderer prop.
Clear/Remove Files: Users can remove files from the upload list, with animated transitions.

Usage Example

import Uploader from "@armco/uploader"
<Uploader
  endpoint="/api/upload"
  allowMultiple
  acceptedFileTypes={["image/jpeg", "image/png"]}
  fileSizeLimit="5mb"
  onFileSelected={files => console.log(files)}
  variant="regular"
/>

API Highlights

acceptedFileTypes: string or array of allowed MIME types
acceptedFileCount: max number of files
fileSizeLimit: max file size (e.g., "5mb")
handler or endpoint: custom upload logic or HTTP endpoint
uploadSequential: boolean for sequential uploads
uploadEntryRenderer: custom file entry renderer
avatarSize, variant: avatar/image preview options
onFileSelected: callback for file selection

Development Notes

Written in TypeScript, React functional and memoized components
Uses SCSS for styling
Integrates with shared Armco types and components