Product Gallery Uploader

ProNew

A grid of product photos where the first is the cover, each can move earlier or later with buttons, gets alt text, and can be removed; adding stops at the maximum and says so. Use this when image order and descriptions matter for a listing.

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.

max6

Guide and examples

When to use it

A listing has several images in a meaningful order (products, properties, portfolios).

Do not use it when: For a single image use Image Upload. For galleries of existing assets use a media library.

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
`max`	`number`	`6`	Most photos.
`onChange`	`(images: { file, alt }[]) => void`	-	After every add, move, edit or remove, in display order.

Accessibility

Photos are an ordered list ("Photos in display order"); each has a text field for its description (hidden label "Description of photo 2"), and the image uses that text as its alt text, with a numbered fallback.
Reordering uses named buttons, not drag only; every move is announced with the new position and whether it became the cover. The cover is a text badge.
The count ("2 of 6") is in the heading; at the limit the Add button is disabled and the status says why files were skipped.

Testing

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

Guide and examples

When to use it

A listing has several images in a meaningful order (products, properties, portfolios).

Do not use it when: For a single image use Image Upload. For galleries of existing assets use a media library.

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
`max`	`number`	`6`	Most photos.
`onChange`	`(images: { file, alt }[]) => void`	-	After every add, move, edit or remove, in display order.

Accessibility

Photos are an ordered list ("Photos in display order"); each has a text field for its description (hidden label "Description of photo 2"), and the image uses that text as its alt text, with a numbered fallback.
Reordering uses named buttons, not drag only; every move is announced with the new position and whether it became the cover. The cover is a text badge.
The count ("2 of 6") is in the heading; at the limit the Add button is disabled and the status says why files were skipped.

Testing

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