Restricted Types File Upload Block for React

The extension verdict looks at the name: is the file's extension on the ticked list. The type verdict looks at file.type, the type the browser reports, which it gives without opening the file. A file passes when its extension is allowed and its type is not contradicting the list (a file with no reported type passes on the extension). The reason for a refusal is written out under the file.

No, and the zone's hint says so. Browsers usually work the type out from the extension or the operating system's table, never from the file's bytes, so a renamed file often reports a matching type. The seeded renamed file is typed to show what a mismatch looks like. This block never opens a file; check contents on your server before you trust one.

Yes. The ticked formats become the zone's accept string (extensions and types), so the picker filters and the zone refuses files that match neither. Refused files are still listed, with the reason, from the zone's reject handler. Change FORMATS to offer other types.

No. The last allowed format cannot be unticked: the status line says "Keep at least one type on the list." Each box is named for its format and the whole cell is its hit area.

All of it. Nothing is uploaded or saved; the lists live in the block's state and a reload restores the four typed files. Each row has a Remove button that names its file, and a polite status line reports every change. To wire it, send the accepted files to your server and re-check type and contents there.

The allow-list becomes a two-column grid of cells above the zone, and the two lists follow, each in a scroll region of its own. A row's two verdicts stack on two lines.