Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

File Upload blocks

Pro

Archive Extract File Upload Block for Radix UI

The contents of a zip as a flat table with path, compressed size, size and a saved-space bar, checkboxes that pick what to extract, a destination select and a scripted extraction that lists what was extracted.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people look inside a delivery and take only what they need, with this archive opener for React with Radix UI. It is the delivery step of Bundlefold, an asset-pack tool. The contents of a typed zip are a flat native table in a scroll region with a sticky header: the Path with its directory dimmed and the file name bold, the Compressed size, the Size, and a bar of how much compression saved. Checkbox rows pick what to extract, a header box selects all, and the foot sums the pick ("4 of 14 selected, 2.1 MB compressed to 7.9 MB"). A Native Select chooses the destination, and Extract, a Shine Button, runs a short Progress bar with Pause and Cancel and then lists each file as extracted in this demo. The frame's bands are ruled by Guides. For delivery tools, asset packs, backups and any app that opens archives.

FAQ

Why a flat table and not a tree?

Because the question is "what is in here and how big is it", not "where does it live". A flat list with the directory dimmed in front of the file name sorts, scans and sums easily, and every row carries its two sizes and its ratio. The Folder block is the tree.

How are the totals worked out?

From the typed entries: the foot adds the compressed bytes and the full sizes of the ticked rows and counts them, and each row's bar is one minus its compressed size over its size. Photos and video barely compress, text and vector files compress a lot, and the bars show it.

What does Extract do?

It walks five checkpoints 600 ms apart on the bar, then lists every ticked path with "Extracted in this demo" and says no file was written. Pause and Resume hold and continue it, Cancel returns to the start, and changing the pick or the destination cancels it. Timers are cleared on every change and on unmount, and with reduced motion the run jumps to its end.

Does it open a zip I choose?

No. The archive is typed, nothing is unpacked, and no file is read. To open a real archive, read its central directory in the browser or on your server and put the entries in place of ENTRIES.

What stays local, and how do I wire it to real extraction?

The pick, the destination and the run are local state. To extract for real, send the ticked paths and the destination to your service, replace the checkpoints with its progress, and list the files it reports.

How does it look on a phone?

The table keeps the box, the path and the size and drops the compressed size and the bar; it scrolls inside its region, and the foot stays pinned with Extract, Pause and Cancel on one line.

All 100 file upload blocks