No Media Empty State Block for React

The pictures stay in the tab. A thumbnail is shown from a temporary address that the page makes for the file and revokes when its tile lets go of it; the file is never read, uploaded or saved, so a reload empties the shelf and Start over empties it without a reload. To wire it for real, send each file to your storage where the code says so, keep its URL in the tile instead of the temporary one, and show an upload failure in the status line.

Pictures take the free tiles in order, whether you chose them or dropped them on the shelf, and a tile you removed is the first to be free again. If more pictures come than there are free tiles, the ones that fit are added and the line says how many did not. With all six filled the button is off and the line says to remove one to make room; Remove, on any tile, turns it back on.

The picker only offers images, and a file that is not one, dropped on the shelf, is turned down: no tile takes it and the status line names the file. More than six at once is turned down too, with a line that says so. Change the accepted types on the File Upload, and the size limit if you want one.

Tab reaches the button, Start over and each tile's Remove button, which is named for its file. The scenes are hidden from assistive technology and the thumbnails carry no description, since the file name beside each one says what it is. One polite status line says what changed, and after a removal focus moves to the button.

The tiles are two across, three rows, and the action band is pinned to the foot of the screen so the button is always in reach; from the medium breakpoint it is an ordinary band under the shelf. The page never scrolls sideways, even at 320 px wide.

No. A tile is the same size with a scene or a picture, its caption row is a fixed height with a file name or a tile number in it, and the status line reserves two lines, so the panel keeps its height from the first picture to the sixth.