shadcn.io is not affiliated with official shadcn/ui
Asset Uploaded Success Block for React
A confirmation panel for an uploaded picture: a greyscale drawing in a frame beside a table of the original and its three smaller copies, with sizes, how much smaller each is worked out from the byte counts and a button that copies each URL.
Installation
Overview
Show what an upload turned into, and what it saved, with this confirmation panel for React with Base UI. It is the panel Assetpantry, media hosting, shows once a picture is in the library: a header with one action, the Shine Button that opens it, over one framed card in two cells and a foot. The start cell is the picture, a greyscale drawing in a frame with its name and size under it. The end cell is a native Table of four files, the original and three smaller copies, with each size, how much smaller it is than the original, and a Copy Button that copies the file's URL. The live line closes the card. For image, video and document hosting, and any upload that makes renditions.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was uploaded and no copies were made. The original (2.4 MB) and the three copies are typed sample sizes, and the URLs sit on an .example host. What the browser really does is the copy buttons, which write each URL to the clipboard. To wire it, fill ASSETS from your upload job, with the byte count and the width of each file, and point HOST at your CDN.
Why is the picture a drawing?
No block here shows a photograph. The harbour at dusk is one inline drawing made of a few greyscale shapes, in a frame that keeps a 3 to 2 shape. To show the visitor's own file, create an object URL for it in an effect, show it in an image in the same frame and revoke the URL when the component goes; nothing then leaves the tab.
How is smaller by worked out?
Each copy's size is compared with the original's, in bytes: the 1280 px WebP at 214 KB is 91 percent smaller than the 2.4 MB original, the 640 px one 97 percent and the thumbnail 99 percent. The figure is rounded down, so the page never claims more than it saved, and the heading reads the largest copy's figure from the same numbers. The height of each copy follows the original's 3 to 2 shape.
What do the copy buttons copy?
The URL of the file in their row, through the browser's clipboard. Each has the file's name in its own name, and the live line says which URL was copied; the URLs go nowhere in this demo.
How does it look on a phone?
The picture goes above the table, and the table keeps the file name, the size and the copy button. The smaller by figure moves under the size.
Where does the link go?
Open in the library is the Shine Button in the header: a link to your own route. It is a Shine Button with render set to an a element and nativeButton={false}.
Related
- Pro
Export Ready Success
Backups and exportsA full-height confirmation page for a finished export: a ring with the hours that remain of the link's 48, the file card, notebook, note and word counts, a real zip built in the browser to download and a link that really copies.
- Pro
Data Import Success
Backups and exportsA confirmation panel for a finished CSV import: one bar split into imported, duplicate and failed rows by their counts, a scrolling ledger of the failed rows with the problem and what the file had, and a real CSV error report built from the typed rows.
- Pro
Storage Optimized Success
Servers and storageA confirmation panel for a compaction: three cells on shared hairlines, one table each, with the size before as a hollow bar, the size after solid and the reclaimed part hatched, worked out from typed sizes, and a toggle group that sorts the tables.
- Pro
Storage Quota Expanded Success
Plans and limitsA confirmation panel for a raised storage limit: a capacity ruler from 0 to 2 TB with the space used, the old limit and the space added, three figures worked out from the same numbers and a forecast of when the free space runs out at a growth rate you pick.
- Pro
Backup Created Success
Backups and exportsA full-height confirmation page for a database backup: fourteen day cells as a retention rack where each pick shows when its snapshot is deleted, a snapshot id and a restore command with copy buttons, a local Test a restore, and a real download of a small JSON manifest.
- Pro
Audit Scorecard Success
Saves and updatesA confirmation page for a finished control review: a ring of the checks that passed worked out from six control families, each family as a row of cells (filled for a pass, hollow for a check that did not), a short list of findings and dates, and a real one-page PDF summary to download.