Profile Picture Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the profile: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Change photo button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same PictureFields component and share the block's state, so a file chosen in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

Nowhere. The file stays in your browser tab: the preview shows it through an object URL that the page makes and lets go of when you choose another file or close the page, so nothing is read by a server and nothing is uploaded. The type and the size are checked from the file's own properties, and a refusal says which rule failed and names the file. In your app upload the file to your storage on Save, check its type and size again on the server, and scan it before showing it to others.

Because the picture is shown round by a circle that cuts the square or the oblong to its middle, the way most directories do, and this block is about choosing, uploading and removing. A cropping step belongs to its own dialog (see the related image crop block), and a camera needs a permission and a stream, which this demo never asks for.

Yes. The real dialog is named by its title and described by its sentence, focus starts on the first tab, and Escape, Cancel and the close button return focus to the Change photo button. The tabs move with the arrow keys; the drop area is a labelled region with a real Browse button that opens the file picker; the drawings are native radio buttons you can arrow through, each named by its pattern; and what changes is spoken once in a polite status line (inside the dialog while it is open). The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange.

Everything. Saving changes this block's state and the drawn profile, and the drawings are paths in the file. In your app store which drawing or which uploaded file is the person's picture, serve it from your own storage, and keep a fallback to initials for anyone who has none.

The copy shown on load docks to the foot of the page as a bottom sheet with its buttons pinned and the content scrolling above them: the preview and Remove picture, then the tabs. The drawings stay in a grid of four across, and the real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen.