shadcn.io is not affiliated with official shadcn/ui
File Picker Table Block for Svelte
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 Svelte with Ark 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.