shadcn.io is not affiliated with official shadcn/ui
Asset Uploaded Success Block for Ark UI
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 Ark 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 asChild around an a element.