shadcn.io is not affiliated with official shadcn/ui
Product Images File Upload Block for Ark UI
A marketplace listing's five image slots: a large primary image, four secondary slots, and three rules (1200 px, plain background, no text) shown met, not met or not checked per image, with Make primary.
Installation
Overview
Hold every product image to the marketplace's rules, with this product image upload for React with Ark UI. It is the image step of one listing on Vendorloft, a marketplace for home goods. A hairline frame with a plus mark on each corner puts the primary image large at the start and, at the end, four secondary slots in a grid (an empty slot is a dashed Add cell) over the three listing rules: at least 1200 by 1200 px, a plain background and no text or watermark. Choose any image, the primary frame or a thumbnail, and each rule shows met, not met or not checked with a check, a cross or a dash, never color alone; the foot reads "3 of 4 images meet the listing rules". Make primary, an outline Button, swaps the chosen image with the primary. The header's Shine Button, the only colored control, the empty slots and a file dropped on the thumbnails use File Upload. The bands are ruled by Guides, with a CSS entrance only. For marketplace sellers, catalog tools and any upload with requirements.
FAQ
Where do the verdicts come from?
From typed facts about the four seeded images (their width, height, whether the background is plain and whether text sits over the product). Each rule is derived from them, and so is the count in the foot, so swapping the primary or fixing an image changes the numbers by itself. In your app, run the checks on your server, or measure the size in the browser, and fill the same facts.
Why does a picked file say Not checked?
Because the block never opens a file. It knows only the name and size, so none of the three rules can be judged, and it says so: "Not checked: files are not opened in this demo." Its slot shows a drawing chosen from the name. A real listing editor would read the dimensions and run the background and text checks before it says met.
What does Make primary do?
It swaps the chosen image with the one in slot 1, keeps the chosen image selected and says where the old primary went. On the primary itself the button stays focusable and reads "This is the primary image", and answers in the status line instead of doing nothing silently.
What happens when all five slots are full?
A pick is refused in words ("All five slots are full") and nothing is replaced. Files that are not images, or are over 25 MB, are refused by name. To make room in your app, add a Remove action to the thumbnail.