Unsupported Format Error Block for React

Only its name, and never its contents. The picker's accept and reject callbacks hand the page a file object; the page reads file.name, finds the extension and says whether it is one of the accepted types. Nothing is uploaded or opened, and the status line says so. Your own upload code, not this page, should send a file anywhere, and your server should check the type again, since a name proves nothing.

The select holds four source formats, each with a typed three-line path and the extensions to save it as. Choosing one rewrites the three lines and the chips under them; the heights are held so nothing below moves. If you choose or drop a refused file from one of these formats (a .pages file, a .gdoc, a .doc, a .key), the select moves to it by itself and the status line says the path is for that file.

It is one typed list, each type with its MIME type and extension, given to the picker's accept prop and shown as the chips under the box, so the list you read is the list the picker enforces. Add a type once and both change.

Yes. The whole box is the drop target, and while a file is over it the dashed border turns solid. The box is a labelled group rather than a button, so the Choose a file button is the one way in with the keyboard and on a phone.

Apple Pages, Google Docs, Word and Keynote are named in plain text because that is the app the file came from; there are no logos, colours or wordmarks. The product, Swapform, is fictional.

The heading, the chip, the select, the three steps and the Choose a file button fit on the first screen, with Start over as an icon beside it. The accepted formats follow under the status line.