shadcn.io is not affiliated with official shadcn/ui
Error Handling File Upload Block for Vue
A triage list of five failed uploads, each with the one action that fits its cause: Retry, Choose another file, Convert or Contact support; Resolved 2 of 5, Retry all and a CSV report.
Installation
Overview
Turn a pile of red rows into a short to-do list, with this file upload panel for Vue with Ark UI. It is the failed-uploads list of Fixlane, an upload tracker for a support tool. Five uploads did not finish, and each row says why in words and offers the one action that fits: a dropped connection and a timeout offer Retry and go through on the second try, a 502 from the server fails once more and then offers Contact support, a file over the 250 MB limit offers Choose another file, a File Upload trigger that takes one file and lists its name, and a file type that is not accepted offers Convert, which marks it as replaced by report.pdf. A handled row stays in place with Undo, so the list never changes height, and the band's count reads "Resolved 2 of 5". The header holds the one Shine Button, Retry all. The foot has a status line and Download the report, a CSV built in the browser from the list. The panel is ruled by Guides. It is built from File Upload, Button, Shine Button and Guides, with a CSS entrance only. For support tools, import screens and any app where uploads fail for different reasons.
FAQ
Why does each row offer a different action?
Because the fix depends on the cause. A network drop or a timeout is worth trying again, a file over the limit needs another file, a wrong type needs a conversion and a server fault that repeats needs a person. The cause is a typed field on each upload, and the action, the wording and the outcome are worked out from it and from the row's state.
What happens on the server error row?
The first Retry fails again and the row says so: "Failed again: the server answered 502. Retrying will not help." Its action becomes Contact support, which marks it as handed to support in this demo. Nothing is sent. Retry all also tries it once, and the status line reports how many went through and how many failed again.
Does Choose another file read the file?
No. The trigger takes one file of up to 250 MB and lists its name on the row as the replacement; the file is never opened or uploaded. A file that is too big or not a PDF, PNG, JPG or MOV is refused, and the status line says why.
Does Convert convert anything?
No. It marks the row as replaced with report.pdf and the status line says nothing was converted. In your app, run the conversion on your server and update the row when it finishes.