File Upload

File upload component with drag-and-drop, progress indicators, and file type validation.

Basic Upload

import { FileUpload } from '@gtcx/ui';
 
<FileUpload
  accept=".pdf,.doc,.docx"
  maxSize={10 * 1024 * 1024}  // 10MB
  onUpload={handleUpload}
/>

Drag and Drop

<FileUpload
  variant="dropzone"
  accept="image/*"
  multiple
  maxFiles={5}
  onUpload={handleUpload}
>
  <p>Drag files here or click to browse</p>
</FileUpload>

With Progress

The FileUpload component provides visual feedback during upload:

File name and size display
Upload progress bar
Success/error status indicators
Remove button for uploaded files

File Type Restrictions

// Documents only
<FileUpload accept=".pdf,.doc,.docx,.xls,.xlsx" />
 
// Images only
<FileUpload accept="image/png,image/jpeg,image/webp" />
 
// Any file with size limit
<FileUpload maxSize={25 * 1024 * 1024} />  // 25MB

Guidelines

Always specify accepted file types to prevent confusion
Show maximum file size clearly
Provide immediate feedback on invalid files (wrong type, too large)
Show upload progress for files > 1MB
Allow users to remove uploaded files before form submission

Validation Wizard