shadcn.io is not affiliated with official shadcn/ui
Batch Upload CRUD Block for Solid
A lab's sample-sheet intake that reads the name, type and size of chosen files, flags what fails, lets each row be labelled, filed and accepted or rejected with a reason, and files the whole batch with an Undo.
Installation
Overview
Review a batch of files before anyone accepts it with this intake manager for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a File Upload drop band, a queue and a foot. The files you choose are only read for their name, type and size, nothing is uploaded or opened, and they join three typed sheets in a native table inside a frame of fixed height. Each row says what it found, "Checked: csv, 412 KB", "Too large: 8.2 MB" or "Type not allowed: .tif", from the rules csv, xlsx or pdf under 5 MB. A label edits where it sits as an Editable, a Native Select files it under a category, and Accept and Reject are a pair of pressed buttons, with a reason select that keeps its space while the file is accepted. A file that failed a check can't be accepted. The foot counts "Accept 2, reject 1" and Accept batch, the one Shine Button, says "Checked in this demo, nothing was uploaded"; Undo returns the batch to review, and Clear batch can be undone too. For lab intake, document review and any queue that is checked before it is filed.
FAQ
Where do the type and size rules live, and how do I change them?
In ALLOWED (the extensions) and LIMIT (bytes) at the top of the file, read by flawOf. The same function decides the message in the row, whether Accept is allowed and which reason a rejected file starts with. Change those two constants and every row, count and message follows.
What does choosing a file actually read?
Only its name, its size and its extension, from the File API object the browser gives the drop band. The contents are never opened and no object URL is made, so there is nothing to revoke. Dropping several files at once adds them in the order given, and the first new row's Accept button takes focus.
How do Accept, Reject and the reason work?
Each row starts accepted if it passes and rejected, with its reason filled in, if it fails. Pressing Accept on a flagged file is refused and the polite line repeats what was found. Reject shows a reason select (the space is held when it is hidden, so rows keep their height). The foot count always reads the current decisions.
What do Accept batch and Undo do?
Accept batch locks the rows (the table's controls are disabled), says the batch was checked in this demo and that nothing was uploaded, and shows Undo. Undo puts the queue back into review with every decision as it was. Clear batch empties the queue, shows an empty state in the same frame, and has its own Undo.
What stays local, and how do I wire a real upload?
The queue is React state in this tab and a reload brings back the three typed sheets. In your app upload each accepted file in accept, for example to a signed URL, record the label, category and decision from the row, and keep the rejected ones with their reason for the audit trail.