All components
File Upload
Dashed dropzone with a file item list showing names, sizes, and delete triggers.
Attachments
- brand-guidelines.pdf1.2 MB
- logo.svg18 KB
Install
zsh — file-upload
1bunx stylexblocks add file-uploadUsage — Base UI
file-upload.tsx
1234567891011121314151617181920212223242526272829303132import { FileUpload } from "#components/ui/base-ui/file-upload.tsx";
export function Example() { return ( // Base UI has no file-upload machine, so Root owns the file list; the // Dropzone opens a real file dialog (and accepts drops), and parts // compose through render <FileUpload.Root maxFiles={5}> <FileUpload.Label>Attachments</FileUpload.Label> <FileUpload.Dropzone> <FileUpload.DropzoneContent> Drag files here or click to browse </FileUpload.DropzoneContent> </FileUpload.Dropzone> <FileUpload.ItemGroup> <FileUpload.Context> {(api) => api.files.map((file) => ( <FileUpload.Item key={file.name} file={file}> <FileUpload.ItemContent> <FileUpload.ItemName /> <FileUpload.ItemSizeText /> </FileUpload.ItemContent> <FileUpload.ItemDeleteTrigger /> </FileUpload.Item> )) } </FileUpload.Context> </FileUpload.ItemGroup> </FileUpload.Root> );}