Resize Images Before Uploading

ProNew

Large photos are scaled down in the browser to a maximum edge and re-encoded, showing the before and after size and dimensions so people see what is saved, with an option to keep the original. Use this when phone photos of several megabytes should not hit your servers.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

maxEdge1600

Guide and examples

When to use it

Users upload photos from phones and you only need web-sized images.

Do not use it when: Do not resize when the original is the product (print, evidence, archival). Offer "keep original".

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`maxEdge`	`number`	`1600`	Longest edge in pixels.
`resize`	`(file, max) => Promise<ResizeResult>`	`resizeImage`	Replace the resizer (a worker, WebP).
`onReady`	`(files: File[]) => void`	-	The files to upload: resized, or the originals the person kept.

fitWithin and resizeImage(file, max, quality) are exported.

Accessibility

The effect is stated in text for each photo ("4000 x 3000 px, 3.0 MB becomes 1600 x 1200 px, 200 KB"), and the original can be kept with a labelled checkbox that names the file.
An unreadable image is an alert on its row; the Upload button waits until every photo is prepared and is labelled with the count.
If resizing would make a file larger, the original is used and the row says "Original kept".

Testing

The pattern ships with a Testing Library test (image-resize-before-upload.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

Users upload photos from phones and you only need web-sized images.

Do not use it when: Do not resize when the original is the product (print, evidence, archival). Offer "keep original".

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`maxEdge`	`number`	`1600`	Longest edge in pixels.
`resize`	`(file, max) => Promise<ResizeResult>`	`resizeImage`	Replace the resizer (a worker, WebP).
`onReady`	`(files: File[]) => void`	-	The files to upload: resized, or the originals the person kept.

fitWithin and resizeImage(file, max, quality) are exported.

Accessibility

The effect is stated in text for each photo ("4000 x 3000 px, 3.0 MB becomes 1600 x 1200 px, 200 KB"), and the original can be kept with a labelled checkbox that names the file.
An unreadable image is an alert on its row; the Upload button waits until every photo is prepared and is labelled with the count.
If resizing would make a file larger, the original is used and the row says "Original kept".

Testing

The pattern ships with a Testing Library test (image-resize-before-upload.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.