Submission Wall Gallery Block for React

The block keeps the picked file's name and size in state and never reads it. In submit, send handle, caption and the file to your endpoint, add the entry the server returns to entries, and replace the drawn stand-in (sceneOf) with an <img> of the stored picture. Keep the "Pending review" badge for entries that have not been approved yet, and drop "Remove mine" if you do not want visitors to withdraw entries.

So it keeps one height. Latest shows the newest six, so a new entry pushes the oldest off; Featured shows the featured ones and fills the rest with empty cells of the same size. Switching tabs, or adding an entry, never makes the page taller or shorter, and a polite line under the wall says how many are shown.

The handle must be 2 to 20 letters, numbers, dots or underscores (a leading @ is optional), the line must have at least three characters (up to 80), and a picture must be chosen (images only, up to 10 MB). Each problem is written under its field, in text with an icon rather than colour alone, and the first field with a problem takes focus. Typing clears that field's message.

Tab goes through the fields, the drop zone (Enter or Space opens the file chooser; a picture can also be dropped on it), Remove picture, Add to the wall and Remove mine, then the tabs and the wall. Remove picture and Remove mine stay in the tab order when there is nothing to remove, and do nothing, so focus is never lost. Pressing Remove picture moves focus back to the drop zone.

The wall comes first, two across, with the four newest entries so that the pictures are on screen at once; the form follows under it, with the same fields at full width.

No. The club, the members, the handles and the captions are invented for the example, so replace them with your own.