shadcn.io is not affiliated with official shadcn/ui
Unsupported Format Error Block for Vue
A full-screen page for a file in a format the product does not take: a chip for the refused file, a select of source formats that rewrites a three-line export path, and a real file picker that checks only the name of the file you choose.
Installation
Overview
Tell people how to turn the file they have into one you take, with this unsupported format page for Vue with Ark UI. It's the screen Swapform, a document converter, shows when a file isn't in a format it reads: a whole screen with the page's rails and one band across it, in one centred column. Under the heading, a chip for the file that was turned down, "report.pages, Apple Pages document". In a framed drop box made with File Upload and Guides, a Native Select of where the file came from (Apple Pages, Google Docs, Word 97, Keynote) rewrites a three-line export path and names what to save it as, and the Shine Button Choose a file opens the real picker. Choosing or dropping a file reads its name only and says whether it is accepted; a refused file from a format the select knows moves the select to it. The accepted formats are listed as chips in three groups, Documents, Images and Archives. It's built from File Upload, Native Select, Shine Button, Badge and Guides, with a CSS entrance only. For any product that converts or imports files.
FAQ
Does the page read the file I choose?
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.
How is the export path chosen?
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.
How does the accepted list work?
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.
Can I drop a file instead?
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.