shadcn.io is not affiliated with official shadcn/ui
Comparison File Upload Block for Svelte
Two one-file drop zones, Original and Modified, over a table of their name, size, type, extension and pixels, with a size-change chip and a note on what each format is.
Installation
Overview
Check what changed between two versions of a file before you ship it, with this file comparison panel for Svelte with Ark UI. It is the delivery check of Sidecheck, QA for a print studio. Two File Upload zones sit across the top, Original and Modified, each showing a drawn thumbnail, the name and the size, and each takes one file: a second pick replaces the first, and Use the sample brings the typed cover back. Under them a native table lays the facts side by side: Name, Size, Type, Extension and Pixels. A Badge chip works out the size change ("-2.9 MB, -60%") with an arrow, and a sentence from a typed lookup says what each format is: PNG lossless, JPG lossy, WebP either. A picked file shows its real name, size, reported type and extension; its pixels say "not read in this demo". The panel is ruled by Guides. For print studios, asset pipelines and any hand-off where a file is converted.
FAQ
Which facts are real for a file I pick?
The name, the size in bytes, the type the browser reports and the extension from the name. Those are properties of the file, not its contents. Pixels would need the picture to be read, so the table says "Not read in this demo" for a picked file; the typed sample covers show 3000 by 2000.
How is the size change worked out?
It is the Modified size minus the Original size, shown with its sign and as a share of the Original: "-2.9 MB, -60%" for a smaller file, "+1.2 MB, +25%" for a larger one and "Same size" when they match. The chip's arrow points down, up or level, and it follows whatever sits in the two zones.
Where do the format notes come from?
A typed lookup keyed by the extension: PNG, JPG, WebP, GIF, TIFF and SVG have a sentence each, and anything else says there is no note. It is a hint about the format, not an analysis of your file; WebP says it can be lossy or lossless because the extension alone cannot tell.
What happens when I drop something that is not an image?
The zone accepts images and TIFF. A file that is not one is refused, left out of the table, and the polite status line names it. Only one file fits each side.
What stays local in the demo, and how do I wire it up?
All of it. Nothing is uploaded or saved and no picture is read. In your app keep the same table, read pixel size with an image decoder (or your server) for each file, and add the facts you care about, such as colour profile or DPI, as more rows in FACTS.