shadcn.io is not affiliated with official shadcn/ui
Folder File Upload Block for Solid
A project folder shown as a tree with file counts, four ignore patterns that hide matches and re-derive the totals, and a folder picker that lists only a top-level name, a count and a size.
Installation
Overview
Let people hand over a whole folder and see exactly what will go, with this folder upload for Solid with Ark UI. It is the handover step of Twigbox, an upload tool for a code agency. A typed project folder is drawn as a Tree View with a file count on every folder, and four ignore patterns at the start (Checkbox cells: node_modules, build/, .DS_Store and *.log) hide what they match and re-derive the totals ("285 files, 18.8 MB" to "124 files, 3.8 MB") and every folder's count. A thin Progress bar shows how much of the size is kept. "Choose a folder" uses the input's directory mode through File Upload and lists the picked folder by its top-level name, number of files and size, nothing more. Upload, a Shine Button, queues the kept files. The frame's bands are ruled by Guides. For handover steps, project uploads, backup tools and any app that takes folders in.
FAQ
How do the patterns change the totals?
Two patterns name a folder (node_modules and build/): a matching folder and everything inside it is dropped from the tree and the totals. Two name a kind of file (.DS_Store and *.log): their files are subtracted from every folder that holds them. The totals, the bar and each folder's count are all derived from the same typed folder list, so they cannot drift.
How do I use the tree from the keyboard?
It is the catalog Tree View: Tab enters it, Up and Down move between folders, Right opens a folder and Left closes it. The folder you select is read out under the tree with its path and the number of files inside it.
What happens when I choose a folder?
The browser hands over the files with their relative paths. The block keeps the top-level folder name, how many files there were and their total size, and says "Its tree is not read in this demo". It does not list, open or upload anything, and the ignore patterns do not apply to it.
Are the numbers real?
The project folder is typed, so its numbers are samples; the picked folder's name, count and size are real, because the browser reports them. Nothing is uploaded either way.
What stays local, and how do I wire it to an upload?
The patterns, the open folders and the picked folder are local state. To upload for real, build the folder list from the files the picker hands over (their webkitRelativePath), apply the patterns to that list, and send the files that remain with their relative paths.