Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

File Upload blocks

Pro

CDN Delivery File Upload Block for Ark UI

Three assets in a SegmentGroup, a delivery URL with Copy, and eight edge regions as checkbox cells with a cache state, age and weekly hits; Purge selected and a confirmed Purge all empty them and lower the bandwidth saved.

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

Know which regions still serve an old copy before you replace a file, with this file upload panel for React with Ark UI. It is the cache screen of Relayfield, an edge-caching service for a media site. A Segment Group picks one of three assets, a trailer, a cover image and a playlist file, and its delivery URL sits under it with a real Copy Button. Eight regions are cells on shared hairlines, each with a Checkbox, the region, its cache state in a word and a glyph (Cached, Stale or Empty), how long ago it was filled and its hits this week. Purge selected empties the ticked regions; Purge all asks in an Alert Dialog, with Cancel focused, and empties all eight. The bandwidth saved a week is worked out from the typed hits and the asset's size, counted only for regions that still hold a copy. The panel is ruled by Guides. It is built from Segment Group, Checkbox, Copy Button, Alert Dialog, Shine Button and Guides, with a CSS entrance only. For media sites, asset pipelines and any CDN console.

FAQ

What do Cached, Stale and Empty mean?

Cached: the region holds a current copy. Stale: it holds an older copy it will refresh on the next request. Empty: it holds nothing and the next viewer waits for a fresh copy from your origin. Each state is a word and a glyph, never colour alone.

How is the bandwidth saved worked out?

For the chosen asset, each region that is not Empty counts its typed weekly hits times the asset's size in megabytes, added up and shown in gigabytes. Purging a region takes it out of the sum, so the figure drops at once.

What do the purge buttons do?

Purge selected empties the ticked regions for the chosen asset only. Purge all asks first and then empties all eight for that asset. Both change this page and nothing else; the status line says how many regions were emptied.

Do the ticks follow me between assets?

No. Choosing another asset clears the ticks, because each asset has its own cache state in every region.

Is the Copy button real?

Yes. It copies the delivery URL, which is on a made-up example domain, and says so in the status line.

What stays local, and how do I wire it?

The states, ages and hits are typed and a purge only edits them. To wire it, load the real state from your CDN's API and make the two purge buttons call its purge endpoint for the chosen asset and regions, then reload the standings.

All 100 file upload blocks