shadcn.io is not affiliated with official shadcn/ui
File Picker Table Block for React
A document inbox table fed by the files you pick on this device: a type glyph, name, kind, size and status per file, a Remove button and a running total, with nothing uploaded.
Installation
Overview
List files the moment they are chosen, with this file picker table for React with Base UI. A drop band over the table holds the catalog File Upload picker, a button and a drop area, and each file you choose becomes a row with a glyph for its type, its name, its kind in words, its size through Format Byte and the status "Selected on this device, not uploaded", with a Remove button that takes it out of the list. Three typed files sit under what you add, and the line over the table adds the list up ("3 files, 4.2 MB"). Only a file's name, type and size are read, in this tab: nothing is uploaded and no copy or address is made. Files of a kind the inbox does not take, files over 25 MB, names already in the list and anything past twelve files are skipped, and the reason is written in a line that is always there under the band. The table scrolls inside a frame of fixed height and emptying it shows an empty state in the same frame. It's built from File Upload, Format Byte, Button, Empty and Guides. For document inboxes, attachment lists and any screen that shows files before sending them.
FAQ
Does anything leave my device?
No. The picker hands the page a File object; the block reads its name, type and size and nothing else. It does not read the contents, make a copy or create an address for it, so there is no object URL to revoke. Closing the tab forgets everything.
Which files are skipped, and where is that said?
Files that are not a PDF, an image (PNG or JPEG), a spreadsheet (CSV or XLSX), a Word document or a zip, files over 25 MB, a name and size already in the list, and anything past twelve files. The reason is written in a line under the drop band that is always reserved, and the sr-only status says that some files were skipped.
How is the kind of a file decided?
From its MIME type, and from its extension when the browser leaves the type empty. The kind sets the glyph and the word in the Kind column.
What does Remove do, and where does focus go?
It takes the file out of this list and nothing else, since nothing was stored. Focus moves to the next row's Remove button, or the one before it when you remove the last, and to Choose files when the list is empty.
How does it look on a phone?
The Kind and Status columns fold under the file name ("PDF, not uploaded"), the Remove button becomes an icon with the same name, and the table keeps scrolling inside its frame, so the page never changes height when you add or remove files.
How do I wire it to a real upload?
Where the accepted handler lists the files, hand each File to your upload code and keep the row as the progress line, changing its status as the request goes. Add a size limit and a type list your server also enforces, since the browser's checks are only a convenience.
Related
- Pro
File Explorer Table
Rows that openA file explorer window with a rail of places, a path bar with an Up button, and a table that lists one folder at a time, folders first, with sortable heads and a New folder button.
- Pro
Export Table
Select and actA sales table with a search and row checkboxes and an Export dialog that asks which rows (visible, selected or all, with counts), whether to include hidden columns and a file name, then downloads a real CSV, shown open in place.
- Pro
Thumbnail Table
Rich cellsA media library whose first column is a drawn thumbnail: pressing one opens a dialog with a larger drawing, the file's facts and Previous and Next buttons through all six files, shown open in place.
- Pro
Row Menu Table
Select and actA drafts table where every row has a three-dot menu named after it, with View, Edit, Duplicate, a Shared with team checkbox item, Archive and a destructive Delete that confirms in an alert dialog, shown open in place.
- Pro
Row Selection Table
Select and actA stock list with a checkbox on every row, a head checkbox that shows a dash when only some are ticked, Shift-click range select and a live line that adds up the price of the ticked rows.
- Pro
Copy Cell Table
Select and actA table of discount codes where each code is a button across its whole cell that copies it to the real clipboard and says Copied for two seconds, with a Copy all in the head and a foot line that counts what was copied.