shadcn.io is not affiliated with official shadcn/ui
Track Upload Music Block for Svelte
A release form that parses audio file names into track number, title and version, lets you edit, reorder and remove each track, adds artist, album, genre, year, a cover previewed from your own file, visibility and a release date, and counts the fields until Publish is ready.
Installation
Overview
Save an artist the typing when they publish a record, with this track upload for Svelte with Ark UI. Drop audio files on the Hatchtrack File Upload and every file name is read into a track number, a title and a version: "03 - Night Shift Orchard (demo).wav" becomes track 3, Night Shift Orchard, demo, marked "From filename" until you edit it. Rows can be edited, moved up and down, and removed. Shared fields hold the artist, album, a genre (Select), a year that cannot be after 2026 (Number Input), a cover image previewed from your own file, a visibility choice and a release date. A Progress bar counts the fields that are done, "6 of 8 fields", and Publish release, the only Shine Button, says what is missing until the form is complete, then runs a short bar and ends on "Published in this demo. Nothing was uploaded." It's built from File Upload, Input, Select, Number Input, Progress, Shine Button, Empty and Guides, with a CSS entrance only. For music distributors, label tools and any release form.
FAQ
How are file names read?
The extension and underscores are dropped, a leading number followed by a space, a dash, a dot or a bracket becomes the track number, a trailing bracket becomes the version, and what remains is the title. A name with no number gets the next place in the list. The rules are in parseName; change them for your own naming habits. Every row says "From filename" until you edit it.
What is read from the files, and what stays local?
Only each file's name, size and type are read in the tab; audio is never opened or uploaded. Refused files are listed with the reason, such as not an audio file or over 500 MB. The first four rows are sample names so the form is not empty: remove them or add your own. The cover is previewed from an object URL that is revoked when it is replaced or the block unmounts. To make it real, upload the files to your storage in publish and read tags from them.
What counts as a field, and when can I publish?
Eight fields: tracks, artist, album, genre, year, cover, visibility and release date. The year must be a four-digit year from 1950 to 2026 and the date cannot be before 2026-10-12. Until all eight are done the button stays focusable but only reports what is missing, for example "Needs 2 more: cover, release date".
How do I reorder tracks?
Move up and Move down swap a row with its neighbour and swap their numbers too, so the numbers keep following the order. At the ends the buttons stay focusable and the status line says the track is already first or last; focus stays on the button you pressed.
How do I use it from the keyboard?
Tab runs the file chooser, then each track's number, title, version and three buttons, then the fields, the cover chooser, the visibility cards (arrow keys move between them) and the date. Every control is named with its file, such as "Title of 02_Paper_Moons.flac". The Publish foot stays visible while you scroll.