Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

File Upload blocks

Pro

Resize Image File Upload Block for React

A resize panel with Width and Height boxes, a keep-the-ratio switch and four presets, a to-scale drawing of the old and new boxes, the percentages, and a derived ImageMagick command with Copy.

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

See what a new size does to an image before you run anything, with this resize panel for React with Base UI. It is the prep tool of Inchworm, for a tile retailer's catalogue. To the start, a drawing at one scale: the original as a dashed 3000 by 2000 box and the new size as a solid box over it, with the share of the width and of the pixels worked out under it and a line that says when the new size is larger than the original or a different shape. To the end, Width and Height Inputs, a Switch to keep the ratio (change one side and the other follows), and four presets: Thumbnail 150, Social 1200 by 630, HD 1920 by 1080 and 4K 3840. Under the drawing sits the derived ImageMagick command in a read-only Input Group with a Copy Button. Name your own file lends its name to the command. The panel is ruled by Guides. For catalogues, galleries and any pipeline that sets image sizes.

FAQ

How does keeping the ratio work?

With the switch on, the other side is worked out from the original's 3 to 2 shape and rounded to a whole pixel, as you type. Switch it off and each side is its own. Choosing a preset with another shape, such as Social 1200 by 630, turns the switch off, and the status line says so.

Is the drawing really to scale?

Yes. Both boxes are drawn with one scale factor chosen so the larger of the two fits the frame, so a 4K size shows as a box bigger than the dashed original and the percentages match what you see.

What is the command?

magick, the file name, -resize with the width and height, and an output name. It adds a ! when the size is not the original's shape, which tells ImageMagick to use the exact size. Copy puts it on your clipboard; the block never runs it.

What happens when I name my own file?

Its name and size go into the command and the caption. Its pixel size is not read, so the drawing keeps the sample's 3000 by 2000, and the caption says so. A file that is not an image is refused with a line in the status.

What stays local in the demo, and how do I wire it up?

All of it. Nothing is resized, saved or uploaded and no picture is read. In your app read the picked image's real pixel size into ORIGINAL_W and ORIGINAL_H, and resize with a canvas, a worker or your server using the same two numbers.

Is it accessible from the keyboard?

Yes. The boxes are labelled inputs, the switch is named, and each preset is a button that says whether it is pressed. A box that holds something outside 1 to 8000 shows the range in the polite status line instead of changing the drawing.

All 100 file upload blocks