shadcn.io is not affiliated with official shadcn/ui
S3 Config File Upload Block for Ark UI
Bring-your-own-storage settings: a bucket name with a five-rule S3 naming checklist that ticks as you type, access key, secret, region Select and path prefix, and a Test connection that checks the fields only.
Installation
Overview
Catch a bad bucket name before it reaches your storage provider, with this file upload panel for React with Ark UI. It is the storage settings screen of Tarnhold, a file app where customers bring their own bucket. The Bucket band takes the name in an Input beside a checklist of the real S3 naming rules that ticks as you type: 3 to 63 characters; only lowercase letters, digits, dots and hyphens; starts and ends with a letter or digit; no two dots in a row; not shaped like an IP address. Credentials holds an access key ID and a secret in a Password Input. Location holds the region in a Select and a path prefix that must not start with a slash. Test connection checks the fields only and names the first thing wrong beside its field, or says they look valid. The panel is ruled by Guides. It is built from Field, Input, Password Input, Select, Badge, Shine Button and Guides, with a CSS entrance only. For storage settings, self-hosted options and any form with a naming policy.
FAQ
Are these the real bucket rules?
They are the core naming rules for S3 buckets: 3 to 63 characters, lowercase letters, digits, dots and hyphens, a letter or digit at each end, no consecutive dots, and not shaped like an IP address. Your provider may add more (reserved prefixes and suffixes, for instance), so confirm with it.
What does Test connection do?
It checks the four fields and nothing else. If one is wrong the status line counts the problems, the first problem field takes focus and each shows its message. If all pass it says the fields look valid. It never connects.
Are the keys real?
No. The access key ID and secret are made-up values, and the secret is masked with a show/hide button. Nothing is saved or sent.
When do the problems update?
After the first Test connection, every keystroke re-checks the fields so a problem clears as soon as it is fixed. Before that, only the bucket checklist ticks as you type.
Why can the prefix not start with a slash?
Object keys in S3 do not begin with a slash, so a prefix of /uploads/ would make a folder literally named with an empty first segment. Use uploads/ instead.
What stays local, and how do I wire it?
The values live in this page and nothing is stored or tested. To wire it, send them to your server over https, store the secret encrypted, and make Test connection do a harmless call (such as listing the prefix) with those credentials and show the provider's real error.