shadcn.io is not affiliated with official shadcn/ui
API Endpoint File Upload Block for Ark UI
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.
Installation
Overview
Let a developer see the request before they write it, with this file upload panel for React 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.