InputFileUpload
File upload field powered by useFileUpload with avatar, compact, gallery, progress, table, image, and sortable variants.
Import
import { InputFileUpload } from "@repo/design-system/components/input/input-file-upload";Upload provider
Configure Azure Blob or Supabase Storage in apps/ui-kit/.env to try real uploads.
Avatar Upload
Profile picture
Click to upload. Max 5 MB.
Compact Upload
Only images, max 2 files, 5 MB each.
Gallery Upload
Upload images to gallery
PNG, JPG, GIF, AVIF, or WebP up to 5 MB each.
Maximum file size: 5MB · Maximum files: 10
Gallery (3/10)
avatar-1.png
43.56KB
avatar-2.png
41.16KB
avatar-3.png
41.16KB
Progress Upload
Upload your files
Support for multiple file types up to 10 MB each.
Maximum file size: 10MB · Maximum files: 6
Upload Progress
Completed: 2image-1.png41.06KB
image-2.png61.33KB
Table Upload
Drop files here or
Maximum file size: 50MB · Maximum files: 10
Files (4)
| Name | Type | Size | Actions |
|---|---|---|---|
PDF document.pdf | 516.85KB | ||
Arch intro.zip | Archive | 246.92KB | |
Exce conclusion.xlsx | Excel | 344.85KB | |
JSON package.json | JSON | 697Bytes |
Image Upload
Choose a file or drag and drop here
JPEG, PNG, GIF, AVIF, or WebP up to 2 MB.
Maximum file size: 2MB · Maximum files: 10
Public image preview
Sortable Upload
Upload up to 5 images. Drag and drop images to reorder. 5/5 uploaded.
Upload product images
Upload up to 5 images. Drag and drop images to reorder.
Maximum file size: 10MB · Maximum files: 5