shadcn.io is not affiliated with official shadcn/ui
Presigned URL File Upload Block for Radix UI
A Steps strip (Request, Upload, Done) over a signed upload URL set in four buttons, an expiry Select that rewrites the expires segment, and a curl command with a Copy button built from the chosen file.
Installation
Overview
Take a signed upload URL apart before you trust one, with this file upload panel for React with Radix UI. It is the docs page of Keyslip, an object-storage SDK. A Steps strip walks Request, Upload and Done. In Request the URL is set in four segments, host, path, expires and signature, and each is a button that explains itself in a note under the URL. A Select sets how long the URL is valid (5, 15 or 60 minutes) and rewrites the expires segment, the signature and the "works until" line. In Upload, a File Upload zone takes a file, lists only its name and size, puts the name in the path and writes the curl --upload-file command with a Copy Button. Done sums the sample run up. The three bodies share one cell, so the height never moves. The panel is ruled by Guides. It is built from Steps, Select, Copy Button, File Upload, Button, Shine Button and Guides, with a CSS entrance only. For SDK docs, upload guides and any team that explains signed URLs.
FAQ
What is a presigned URL?
A URL your server signs so a browser can upload one object straight to storage for a short time, without your storage keys. The signature covers the host, path and expiry, so changing any of them makes the storage service refuse the request.
What do the four buttons do?
Each one marks a part of the URL as pressed and the note under the URL explains it: where the file goes, which object it may write, how long the URL works and what the signature protects. They are toggle buttons, so a keyboard can reach and press every one.
What does the expiry change?
The expires segment (in seconds), the signature (a different made-up value for each expiry), the "works until" line and the curl command. Times come from one fixed "as of" moment, 09:00 UTC on 18 October 2026.
Does it read my file?
No. The drop zone lists the file's name and size only, and the name is put in the path (spaces become hyphens). Nothing is uploaded; "Upload with this URL" moves to Done and says nothing was sent.