Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Presigned URL File Upload Block for Svelte

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Take a signed upload URL apart before you trust one, with this file upload panel for Svelte with Ark 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.

Are the signatures real?

No. They are plainly made-up strings on an example domain. A real signature is made on your server with your secret key and the same fields.

What stays local, and how do I wire it?

The whole flow is local. To wire it, have your server sign a URL for the object name and expiry (your SDK's presign call) and return it, show that in Request, and let the browser PUT the file to it in Upload.