Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

File Upload blocks

Pro

API Endpoint File Upload Block for Vue

A request builder for POST /v1/files with an API key, a name and a file slot, Tabs of cURL, fetch and Python snippets that follow the form, and a typed 200 or 401 sample response.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let a developer see the request before they write it, with this file upload panel for Vue with Ark UI. It is the upload route of Depotkit, an API reference for a storage service. The start cell is the request: the fixed route POST /v1/files, an API key in a Password Input, an optional name in an Input and a File Upload slot that lists the chosen file's name and size. The end cell holds Tabs of three snippets, cURL, fetch and Python, written from the form, so changing the name or the file rewrites all three, each with its own Copy Button. Send test request shows a typed sample response under them: 200 for a key that starts with dk_test_ or dk_live_, and 401 for any other, marked "Sample response: nothing was sent." The panel is ruled by Guides. It is built from Tabs, Password Input, Input, File Upload, Copy Button, Badge, Shine Button and Guides, with a CSS entrance only. For API references, quickstarts and developer portals.

FAQ

Does the key end up in the snippets?

No. The snippets read the key from an environment variable ($DEPOTKIT_KEY, process.env.DEPOTKIT_KEY, os.environ), so what you type is never written into code you might copy. The key only decides whether the sample response is a 200 or a 401.

Does it read my file?

No. The slot lists the name and size and puts the name in the snippets. The file is never opened, uploaded or sent.

How is the sample response chosen?

By the key's prefix only: dk_test_ or dk_live_ gets a 200 with a stored file, anything else gets a 401 with an invalid_key error. Both bodies are built in the page and marked as a sample.

How do the tabs work?

They are standard Tabs: arrow keys move between cURL, fetch and Python and each panel has its own Copy button. The panels have a fixed minimum height, so switching never moves the page.

Which text does Copy take?

The snippet in that tab as shown, line breaks included, so it pastes ready to run once the environment variable is set.

What stays local, and how do I wire it?

Everything: no request is sent and the response is typed. To wire it, make Send test request call your sandbox endpoint with the key, and show its real status and body in place of the sample.

All 100 file upload blocks