No Uploads Empty State Block for React

The files stay in the tab: the page reads only each file's name, size and type and lists them, and never opens, uploads or sends one, so a reload empties both lists and Start over empties them without a reload. To wire it for real, send each accepted file to your storage where the code says so and show its progress in the slot, and keep the rules on your server too, since the zone's checks are for the visitor's convenience.

The zone is given the five types, the 5 MB limit and the picker, so a file that breaks a type or size rule is turned down before it is listed and lands in Not added with its reason: type not allowed or over 5 MB. The limit of four files is counted by the page across selections: files past the fourth are turned down with limit of four files reached. Edit the type list, the size and the limit at the top of the file to match your service.

Anywhere in the dashed box. While you drag a file over it, the border darkens, the box tints and a ring appears, all in the text color and never the primary one. Clicking the box does nothing, so a click on the text never opens a dialog by accident: the button is the way to choose files, and the one a keyboard or a phone uses.

Tab reaches Choose files and then Start over, and the headings give the page its outline: the title, then Rules, Added and Not added. The drawing is hidden from assistive technology, an empty slot is announced as one, and one polite status line says what happened after each choice, such as 2 of 4 added, 1 turned down.

The drawing is 112 px tall above the heading, the button follows it, and the rules and the two lists stack under it. There is no drag copy because there is nothing to drag: the button is the only path. The page never scrolls sideways, even at 320 px wide.

No. The Added list always has four slots, the Not added list holds room for two files and counts the rest, and the status line reserves its lines, so the page stays centred and nothing moves when files arrive or are turned down.