Avatar Upload Account Block for React

The block draws pictures as initials in a shape and a tone taken from the theme's neutral colours, so it never ships a stock portrait. The only real picture is the one a visitor chooses, and it is read in their own tab with an object URL: nothing is uploaded, it is not kept past a reload and the URL is released when the page goes, when a picture is deleted and when the oldest one drops off the history.

A PNG, a JPEG or a WebP of 2 MB or less. The type and size come from the file's own properties, and a file that fails is named with its reason ("banner.gif is not a PNG, JPEG or WebP", "huge.png is 3 MB. The limit is 2 MB.") in a slot that is always there, so the panel does not move. The current picture stays. Change ACCEPT, TYPES and LIMIT to your own rules, and validate again on your server.

Replacing the picture puts the old one at the front of the kept row. The row holds the last five, so a sixth pushes the oldest out and the status line says so. Restore swaps the chosen tile with the current picture, so nothing is lost. Delete turns the tile's buttons into "Delete" and "Keep" with the question "Delete this one?"; Escape keeps it, and focus moves to the next tile. Free slots stay drawn, so the row keeps its height.

It keeps the history. With pictures kept, turning it off opens an alert dialog that says they are deleted for good and that new ones will no longer be kept; Keep history is focused first and Escape closes it with the switch still on. Confirming deletes them and the grid becomes an empty state that says history is off, with one button to turn it back on. With nothing kept, the switch just flips.

Everything: choosing, restoring and deleting change this page's state and say so in the foot. To make it real, upload the accepted file to your storage in accepted, keep the returned address in the picture's url, and call your endpoints in restore, remove and confirmOff. Show a failure in the same status line and keep the old picture until the server answers.

Every tile's buttons say which picture they are for ("Restore the picture from 12 Aug"), the pictures are drawn with their words beside them, and the status line is a polite live region present from the start. On a phone the tiles go three across in two rows with a sixth slot that reads "Free", and the Replace button takes the full width.