File Upload

The FileUpload component provides drag-and-drop file uploading with progress feedback.

Basic Usage

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

Props

Prop	Type	Default	Description
`accept`	`string`	`'*'`	Accepted MIME types or extensions
`maxSize`	`number`	`5242880`	Max file size in bytes (default 5MB)
`multiple`	`boolean`	`false`	Allow multiple file selection
`onUpload`	`(file: File) => Promise<void>`	—	Upload handler
`onRemove`	`(file: File) => void`	—	Remove handler
`disabled`	`boolean`	`false`	Disable uploads

Features

Drag and drop — Drop files onto the upload zone
Progress indicator — Visual feedback during upload
File type validation — Rejects files not matching accept
Size validation — Rejects files exceeding maxSize
Multiple files — Upload several files at once with multiple
Preview — Image thumbnails for image file types

With Form Integration

import { Form, FileUpload, Button } from '@gtcx/ui';
 
<Form onFinish={(values) => console.log(values)}>
  <Form.Item
    label="Supporting Documents"
    name="documents"
    rules={[{ required: true, message: 'Please upload at least one document' }]}
  >
    <FileUpload
      accept=".pdf,.jpg,.png"
      multiple
      maxSize={25 * 1024 * 1024}
      onUpload={handleUpload}
    />
  </Form.Item>
  <Button type="primary" htmlType="submit">Submit</Button>
</Form>

Accessibility

Upload zone is keyboard-focusable and activates on Enter/Space
File list announces additions and removals to screen readers
Progress is communicated via aria-valuenow
Error messages are associated with the upload zone via aria-describedby

Editor Clipboard