Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

File Upload blocks

Pro

Data Room File Upload Block for Vue

A deal room window with a Financial, Legal and Technical section rail, a drop strip and document list per section, actions held off until an NDA box is ticked, and a collapsible access log.

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

Gate a set of documents behind a promise people actually have to make, with this file upload window for Vue with Ark UI. It is the deal room of Bidroom, a data room for small acquisitions. A rail lists three sections, Financial, Legal and Technical, with counts that follow the lists, and becomes a row of buttons on a phone. The page shows the chosen section: an NDA Checkbox at the top, a drop strip, and the documents with Preview and Download buttons. Until the NDA is ticked those buttons, the top bar's Shine Button, Add documents, and the File Upload strip stay off, with the reason said above them and in the status line. An Access log in a Collapsible lists earlier events and then your own, in order. A notice says that a live room would watermark pages; none is applied here. The window is framed by Guides. For deal rooms, due diligence and any app that makes people accept terms before they open files.

FAQ

What does the NDA box do?

It switches on what the room holds back: Preview, Download, Add documents and the drop strip. Before it is ticked those controls are off and the line under the checkbox says why; pressing a marked Preview or Download button says "Tick the NDA first". Unticking switches them off again and the log records it. It does not store an agreement; in your app the tick would be a signed record on your server.

Are there real documents?

No. The nine documents are typed names and sizes. Preview and Download answer honestly that nothing opens in this demo. Files you add are listed with their name and size under the section you are in, marked "added by you", and are never read or uploaded.

What does the Access log show?

Three typed events from before you came, then what you do, in order and with no clock: accepting the NDA, opening a section, asking to preview or download, adding documents. It keeps the last twelve of yours. A real log would carry identities and times from your server.

Is anything watermarked?

No. The notice says that a live room would put your name on each page and that this demo does not. Watermarking happens when the server renders the page you are allowed to see.

What stays local, and how do I wire it to a server?

Everything. The sections, documents, the NDA tick, the log and the added files are state in the block, gone on reload. In your app load the sections from your server, record the NDA tick there, authorise each Preview and Download on the server, and write the log from the server's events.

How does it look on a phone?

The window keeps its height. The rail becomes a row of three buttons above the page that scrolls sideways if needed, and the page scrolls inside the window with the status line fixed at its foot. The row buttons are 44 px square.

All 100 file upload blocks