shadcn.io is not affiliated with official shadcn/ui
Convert Format File Upload Block for React Aria
A one-file converter that offers only the formats the file can become, with a quality select for lossy targets, an estimated output size, a command to copy and a scripted run with Pause and Cancel.
Installation
Overview
Let people turn one file into another format without guessing what is possible, with this file converter for React with React Aria. It is the converting step of Formshift, a file-conversion service. A source card at the start shows the file's name, size and extension next to a File Upload strip that replaces it, and at the end a Segment Group lists only the formats that extension can become: a PNG offers JPG, WebP, AVIF and PDF, a DOCX offers PDF, ODT and TXT, and an extension with no target says so. Where the target is lossy a Native Select sets the quality and the estimate changes; where it is not, the select stays in place, disabled, and says why. The estimated output size comes from a typed ratio, and the command Formshift would run sits beside a Copy Button. Convert, a Shine Button, walks a short run on a Progress bar with Pause and Cancel, then says "Converted in this demo: no file was produced". The frame's bands are ruled by Guides. For file converters, export steps, media tools and any app that turns one file into another.
FAQ
How does it know which formats to offer?
From a typed map at the top of the file, TARGETS, keyed by extension: it lists what each source can become, and the segment group renders exactly that list. Picking a file with another extension rebuilds the group; an extension that is not in the map shows "Formshift has no target for this extension" and Convert says so instead of running. Extend the map with your converter's real capabilities, or fetch it from your API.
Where do the estimated size and the command come from?
The size is the source's real byte count times a typed share for the target (SHARE), scaled by the quality choice when the target is lossy, and the words say "estimated". The command is built from the same three values (file name, target, quality) by one helper, so the text, the copy and the estimate always agree. Nothing is measured, because no file is opened.
What does Convert actually do?
It walks five checkpoints 600 ms apart with one-shot timers, shows the percentage and a sample time left, and ends with "Converted in this demo: no file was produced". Pause holds the checkpoint and Resume continues; Cancel returns to the start; changing the source, the target or the quality cancels a run. Every timer is cleared when the run changes or the block unmounts, and with reduced motion on the run jumps to its end.
Does it read the file I choose?
No. A picked file replaces the sample and the block keeps only its name, its size in bytes and its extension. The status line says the file is not opened, and the glyph on the card comes from the extension alone.
What stays local, and how do I wire it to a service?
Everything: the source, the choices, the run and the result live in the block's state and are gone on reload. To convert for real, upload the file from the picked handler, send the target and quality to your conversion API, replace the scripted checkpoints with its progress, and show the real output's name and size in place of the estimate.