FileUpload

Form Controls

Stable

File upload component with drag-and-drop dropzone, file list, progress tracking (linear, circular, or fill), and upload callbacks.

Quick Import

Full Documentation

import { FileUpload } from "@cohere-ai/waypoint-ui/file-upload";

Live Preview

Loading FileUpload...

Open in Storybook Open in v0 View Docs

Props

Name	Type	Default	Description
`value`	`File[]`	-	Controlled file list
`defaultValue`	`File[]`	-	Default file list
`onValueChange`	`function`	-	Callback on file list change
`accept`	`string`	-	Accepted MIME types
`maxFiles`	`number`	-	Maximum number of files
`maxSize`	`number`	-	Maximum file size in bytes
`multiple`	`boolean`	`false`	Allow multiple file selection
`disabled`	`boolean`	`false`	Disables the upload area
`onUpload`	`function`	-	Upload handler with progress/success/error callbacks
`variant (FileUploadItemProgress)`	`'linear' \| 'circular' \| 'fill'`	`'linear'`	Progress indicator style

Examples

Dropzone with File List

File upload with drag-and-drop and file listing

1 import {
2   FileUpload, FileUploadDropzone, FileUploadTrigger,
3   FileUploadList, FileUploadItem, FileUploadItemMetadata,
4 } from '@cohere-ai/waypoint-ui/file-upload';
5  
6 <FileUpload accept="image/*" maxFiles={5}>
7   <FileUploadDropzone>
8     <FileUploadTrigger asChild>
9       <Button variant="outline">Choose files</Button>
10     </FileUploadTrigger>
11     <p>or drag and drop here</p>
12   </FileUploadDropzone>
13   <FileUploadList>
14     {files.map((file) => (
15       <FileUploadItem key={file.name} value={file}>
16         <FileUploadItemMetadata />
17       </FileUploadItem>
18     ))}
19   </FileUploadList>
20 </FileUpload>

Additional Resources

View in Storybook

Explore all variants and interactive examples

Full Documentation

Complete API reference, advanced usage, and accessibility info

Found an Issue?

If you've encountered a bug or have feedback about the FileUpload component, please report it to our team. Your feedback helps us improve Waypoint.

Available for all users • Issue will be created in Linear

Was this page helpful?

Your feedback helps us improve our documentation.

Need Help?

Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.

1	import {
2	FileUpload, FileUploadDropzone, FileUploadTrigger,
3	FileUploadList, FileUploadItem, FileUploadItemMetadata,
4	} from '@cohere-ai/waypoint-ui/file-upload';
5
6	<FileUpload accept="image/*" maxFiles={5}>
7	<FileUploadDropzone>
8	<FileUploadTrigger asChild>
9	<Button variant="outline">Choose files</Button>
10	</FileUploadTrigger>
11	<p>or drag and drop here</p>
12	</FileUploadDropzone>
13	<FileUploadList>
14	{files.map((file) => (
15	<FileUploadItem key={file.name} value={file}>
16	<FileUploadItemMetadata />
17	</FileUploadItem>
18	))}
19	</FileUploadList>
20	</FileUpload>