Empty Uploads Dropzone
An empty file library with a dashed dropzone, browse and import from URL actions, a facts row for formats and storage, and a privacy note.
An empty file library with a dashed dropzone, browse and import from URL actions, a facts row for formats and storage, and a privacy note.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Empty Uploads Dropzone is the zero state of a file library before anything has been added. A Files header with a 0 files count sits above a card whose centered dashed panel invites a drop anywhere inside it, with an UploadCloud icon, the line that uploads run in the background so work continues, and Browse your computer and Import from URL buttons. A three column facts row states the accepted formats, the per file size cap, and the storage still available.
The facts are one array, so the formats, size limit, and storage figures each have a single place to change. The panel is a static dropzone rather than a live drag target, which keeps the block preview safe while still teaching the two ways in. The footer note covers the privacy and scanning defaults: new uploads stay private until shared and every file is scanned before it becomes available.
Reach for this block on any file surface that ships empty until the user adds something, wired to the zero-count branch of your library query. Replace the browse handler and the URL importer with your real upload flow and point the facts row at live quota figures.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the empty file library. Other empty upload states:
Tip: state the accepted formats and size cap up front so a rejected upload never comes as a surprise after the transfer.