shadcn.io is not affiliated with official shadcn/ui
Input examples · Special
File Upload with List Input for React
A multiple file input that lists the chosen files with their sizes and a remove button.
File inputs show little about what was picked. This example uses a type file input with multiple and lists every chosen file under it, with a file icon, its name, its size in kilobytes and a button to remove it. Use it for attachments, document uploads and anywhere people pick several files before submitting.
Preview
Installation
FAQ
How does the field accept several files?
multiple on the file input lets the picker select more than one. Each time the selection changes, the chosen files are copied from the input into a list kept in state, which renders the rows.
What does each row show?
A FileTextIcon, the file name, truncated when it's long, and the size in kilobytes with one decimal, from the file's size divided by 1024. The rows are a list with a border and rounded corners.
How does the remove button work?
It's a ghost Button at size icon-xs with an XIcon. It carries its row's index in data-index and removes that file from the list. Its aria-label names the file, such as Remove report.pdf.
Does removing a row change what the input holds?
No. The list is the example's own state; the browser's file input still holds the files from the last pick. Submit the list from state, for example with FormData, rather than the input itself.
Related
- Input with LabelA text input with a label above it
- Disabled InputA disabled field showing an account ID
- Button with Text (Standard)The one filled action
- Login FormA login form with a welcome heading
- Standard DialogA share dialog with a read-only link, a
- Document Preview Hover CardA file link that opens a preview card