shadcn.io is not affiliated with official shadcn/ui
Batch Convert File Upload Block for React
A conversion queue with a Convert all to select, a target select on each row that overrides it, files that cannot reach their target skipped in words, a count in the foot and a compatibility matrix.
Installation
Overview
Let people set one target for a whole queue and still fix the exceptions, with this batch converter for React with Base UI. It is the queue of Turnwell, a conversion queue for a design agency. A "Convert all to" Native Select sets the target of every row, and each row has a select of its own that overrides it. Every row says in words what will happen: "Will convert to PDF", "Already PDF: skipped", or "WEBP cannot become PDF here: skipped", and the toolbar and the button count the result ("6 of 8 will convert", "Convert 6 files"). A Collapsible holds a compatibility matrix, a native table of what each source can become, and a File Upload strip adds files by name and size. Convert is a Shine Button that queues the files that can go. The frame's bands are ruled by Guides. For conversion queues, import steps, asset pipelines and any app that processes many files toward one format.
FAQ
How are unsupported conversions detected?
Every row's source extension is looked up in a typed map, REACH, of what it can become; the target is the row's own choice or "Convert all to". A target that is the source's own format is skipped as "Already", one the source cannot reach is skipped with the pair named, and everything else will convert. The compatibility matrix is drawn from the same map, so the table and the rows never disagree.
How does a row override the batch target?
Each row's select starts on "Same as all" and shows the current batch target in brackets. Choosing a format sets that row's own target; choosing "Same as all" hands it back. Changing the batch target changes only the rows that follow it.
What is the compatibility matrix for?
It shows at a glance which sources can reach which targets, so a person can pick a batch target that suits most of the queue. It is a real table with row and column headers and a word for every cell ("Yes", "No", "Same format") for screen readers, and it scrolls sideways on a narrow screen.
Does it read the files I add?
No. A file added by drop or by Add files joins the queue with its name and size only, up to twelve. Its extension decides what it can become; its contents are never opened.
What stays local, and how do I wire it to a converter?
The queue, the targets and the "Queued" result are all local state, gone on reload, and Convert only marks the rows that can go as queued. To convert for real, send each eligible file and its target to your conversion API from queue, show each job's own state in its row, and replace REACH with the formats your service supports.