shadcn.io is not affiliated with official shadcn/ui
Cloud Storage File Upload Block for Radix UI
An import picker shown open over a new-project form: tabs for Google Drive, Dropbox and OneDrive, each a typed browser with a breadcrumb, folders and ticked files, and a selection tray that keeps picks across tabs.
Installation
Overview
Pull files in from wherever a team keeps them, with this cloud import dialog for React with Radix UI. It opens from the New project page of Ingather, a design tool: the header holds an outline Import from cloud Button, and the page itself, two fields and an assets box, is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The Dialog has Tabs for Google Drive, Dropbox and OneDrive, each with a two-letter tile and named in text. Each tab is a typed browser with a breadcrumb two levels deep, folders you open and files with a Checkbox, in a scroll region of fixed height. A tray under the tabs keeps every pick across all three providers ("2 selected, 41 KB"), with a Remove on each chip and a count on each tab. Import adds the picks as chips on the page behind and is the block's one Shine Button. Nothing connects in this demo: the accounts and every file are typed samples. For preview the dialog is drawn open in place when the page loads; the header button opens the real Dialog with the same tabs and the same picks. For design tools, editors and any form that takes files from cloud drives.
FAQ
Why is the dialog already open, and what do I keep?
So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped or focused. The Import from cloud button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same ImportFields and share the block's state, so what you ticked in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
How does the selection persist across tabs?
There is one list of picked file ids for all three providers, kept in the block rather than in a tab. Ticking a file in Dropbox does not touch Google Drive's picks, switching tabs loses nothing, each tab shows how many of its own files are picked, and the tray lists them all with a Remove on each. Each provider also remembers which folder you were in.
How do the folders and breadcrumb work?
At the top of a provider, folders come first and are buttons that open them; inside a folder, only its files show. The breadcrumb has the provider's root as a button that goes back up and the open folder as the current page. The scroll region keeps its height, so opening a folder never resizes the dialog.
What if I import nothing?
Import answers with "Select at least one file to import." in a reserved line and moves focus to the selected tab, and the dialog stays open.
What stays local, and how do I wire it?
Everything. Nothing connects to any account, nothing is read, and Import only draws chips on the page behind. To wire it, run each provider's own sign-in and file picker or API from your server, replace PROVIDERS with the folders and files it returns, and copy the chosen files on the server; add the provider logos you have the rights to use where the tiles are.
How does it look on a phone?
The copy shown on load docks to the foot of the frame as a bottom sheet with Import pinned below a scrolling body. The tabs keep only their tiles and counts, with the names read out only. The real dialog keeps the catalog's own layout and scrolls inside itself if the screen is short.