shadcn.io is not affiliated with official shadcn/ui
Avatar File Upload Block for Ark UI
A circular profile photo that is the drop zone itself, beside a checklist that checks the picked file for real: format by extension and reported type, size against 2 MB, and dimensions marked not read.
Installation
Overview
Show people what a photo must be before they pick one, with this avatar upload for React with Ark UI. It is the profile photo of Rosterfox, a team directory. The circle is the File Upload drop zone itself: initials inside, a camera badge on its edge, a click or Enter to choose and a file dropped on it to use. Beside it a Restrictions list checks the picked file for real: Format (JPG, PNG or WebP, by its extension and by the type the browser reports) and Size (at most 2 MB, the real byte count), each with a mark and a word, never color alone, and the sentence says why when one fails. Dimensions would need the file opened, so that row says "Not read in this demo". A file that meets both rules appears in the circle as a drawn portrait with its name and size; one that does not stays out and your current photo is unchanged. Remove returns to the initials. The header's Shine Button is the only colored control. The bands are ruled by Guides, with a CSS entrance only. For profile pages, team directories and account settings.
FAQ
Which checks are real?
Format and Size. The name's extension and file.type are read without opening the file, and the size is file.size. A file passes the format rule when the extension is allowed and the reported type, if there is one, is too. Dimensions are not checked: reading them needs an image decode, so the row says so instead of guessing.
What happens to a file that fails?
The checklist shows which rule failed and why ("pitch.gif is image/gif: use JPG, PNG or WebP", or "3.1 MB is 1.1 MB over the 2 MB limit"), the status line says it can't be used, and the circle keeps your current photo or your initials. The picker also filters by the allowed types; a dropped file of another type is still checked and explained instead of vanishing.
Why is the photo a drawing?
The block never opens a file, so it can't show what you picked. A valid file shows a drawn portrait with its real name and size next to it. In your app, show the image from an object URL created in an effect and revoked on cleanup, and read the dimensions there for the third rule.