Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

File Upload blocks

Pro

Track Form Music File Upload Block for React Aria

A track form with title, artist, album, genre, key and BPM, an ISRC that parses live into country, registrant, year and designation with a validity word, and cover art and audio master slots.

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

Check a release before it goes to the stores, with this music file upload form for React with React Aria. It is the track form of Masterbay, release delivery for indie labels, in two columns. The first holds the title, artist and album Inputs, a genre and a key Native Select (all 24 keys) and a Number Input for tempo that accepts 40 to 240 BPM. The second holds the ISRC, parsed as you type, hyphens optional, into country, registrant, year and designation with a validity word, then two single-file File Upload slots for the cover art and the audio master. Submit names what is missing and moves focus to it. For labels, distributors and any form that validates an identifier as it is typed.

FAQ

What stays local in the demo?

Save draft and Submit only change the status line: nothing is stored or sent to a store. Picked files are listed by name and size and never opened, so the cover's pixel size and the audio's length are not measured; the 3000 by 3000 rule is stated in text. To wire it for real, check the image size and audio format on the server and post the form with the two files.

How is the ISRC checked?

The code is stripped of hyphens and spaces and upper-cased. It must be twelve characters: two letters for the country, three letters or digits for the registrant, two digits for the year and five digits for the designation. The validity word says what is missing or wrong. It checks the shape only: whether the registrant exists is the registry's business.

How is the year worked out?

The two digits become 19xx from 50 up and 20xx below, so 26 reads as 2026.

What does Submit do when something is missing?

It stays pressable, lists what is missing in the status line (title, artist, tempo, ISRC, cover, audio) and moves focus to the first one. It never hides or disables the button.

How does the tempo field behave?

It accepts whole numbers from 40 to 240 BPM. Out-of-range or empty values show a short note after you try to submit. Under React Aria the field commits on blur, Enter or an arrow, not on each keystroke.

What do the file slots accept?

The cover takes a JPG or PNG under 10 MB and the audio master a WAV, FLAC or AIFF under 500 MB, one file each. A second pick replaces the first, and a refused file is named in the status line.

All 100 file upload blocks