shadcn.io is not affiliated with official shadcn/ui
Bulk File Upload Block for Ark UI
A 24-file batch drawn as one stacked bar (done, uploading, failed, waiting) with four counted toggles that filter the list, Upload all, Retry, and a Cancel all that asks first and lists what it skips.
Installation
Overview
Make a big batch readable at a glance, with this file upload panel for React with Ark UI. It is the bulk importer of Batchbarn, which loads product catalogues. A typed batch of 24 files is drawn as one stacked bar split Done, Uploading, Failed and Waiting, in foreground weights with a hatch for failed, never in colour. Under it a legend of four counted Toggle Group cells filters the list below: press one or more to show only those states, none to show all. Upload all, the header's one primary, marks the waiting files as sent in this demo. Cancel all opens an Alert Dialog that says what it will cancel and what it will skip: done files stay sent and failed files stay for a retry. A failed row offers Retry, and a waiting or failed row can be removed. Add files is a File Upload trigger. The panel is ruled by Guides. It is built from File Upload, Toggle Group, Alert Dialog, Shine Button, Button and Guides, with a CSS entrance only. For catalogue importers, media ingest and any large batch.
FAQ
How is the bar drawn?
Four segments share the width in proportion to their counts, in a left-to-right box so the order never flips. Done is solid foreground, uploading a lighter weight, waiting a faint one and failed a diagonal hatch, so the states differ by pattern and weight, not hue. The bar has a text alternative that lists the four counts.
How does the legend filter work?
The four cells are a multiple-select Toggle Group. Nothing pressed shows every file; pressing Failed shows only the failed ones; pressing two shows both. A pressed cell has a tint and a foreground ring, and the count in each cell is worked out from the rows. The list sits in a fixed-height scroller, so filtering never changes the panel's height.
What does Cancel all do?
It asks first. The dialog says how many files it cancels (waiting and uploading), and lists what it skips: done files, which stay sent, and failed files, which stay for a retry. Keep the batch is the first button and takes focus. With nothing waiting or uploading the button stays in place and says so.
What does Upload all do?
It moves every waiting file to Done and says "marked sent in this demo. Nothing was uploaded." Files already uploading and failed files are left alone. With nothing waiting it stays in place and answers in words.