Avatar Upload Onboarding Block for React

No. The file is read in the tab: it is shown through an object URL, its pixel size is read once so the cropper can match its shape, and the URL is released when the picture is removed, replaced or the page goes. The page says so under the button. In your app, crop with the cropper's own export and send the result where submit says so.

Yes. Tab to the circle (it is named "Crop selection area") and press the arrow keys to move it; plus and minus zoom, and the Zoom slider does the same. The three previews follow every move, because they read where the circle sits on the picture rather than keeping a copy.

It is refused in words under the buttons: "notes.txt is not a PNG, JPEG or WebP." or "photo.png is 6.2 MB. The limit is 4 MB." A file the browser cannot decode is refused too. The line is always reserved, so nothing moves, and the status line says which file was not used.

Each preview is a round box with the picture inside it, sized and offset by three CSS properties worked out from the circle's place on the picture. Because every share is measured against the picture's width, a picture that is not square keeps its shape. Before a picture is chosen they show the initials.

Continue without a picture says "Choose a picture, or skip for now." and puts focus on Choose a picture; with a picture it says it saved your crop in this demo. Skip for now says it was skipped, keeps what is chosen and leaves the rest for Settings.

Everything: nothing leaves the browser, and a reload forgets the picture. Wire Continue to an upload of the cropped image, set the new picture as the member's and revoke the object URL once it has been sent.