Skip to content
DOL Studio

Uploader

Design: Stable Code: Coded formfiledrag-drop 40 Figma sets 2 standalone .Upload/content/general file upload

Live preview

Drop zone (default)

Idle state — click or drag-drop file to upload. Title + hint copy guide acceptable file types.

Error state

`error` prop = danger-tinted border + red icon. Shows file-validation failure (size, type, count).

Uploaded file row

Completed-upload row with name, size, timestamp, status icon, remove action.
take_me_to_your_leader.docx
File size: 404Kb·Uploaded: 12:30, 05/08/2022

Uploading file row

Progress state — animated progress bar + `progress` prop (0-100). Common for large multi-MB file uploads.
presentation.pdf
50%

Compact size

`size=sm` for sidebars / forms / chat-attachment contexts. Same drop-zone behavior at reduced visual weight.

Import & files

Import
import { Uploader } from "@dol/ui/uploader";
Source file
packages/@dol/ui/src/uploader/Uploader.tsx

Figma source

Figma source 40 sets
Page
Uploader
Sets
40 + 2 standalone
Primary set
.Upload/content/general file upload · 3 variants Open in Figma →
Showing: .Upload/content/general file upload
11 other sets (+ 28 more not listed)
  • .Layout/UploadFileComponent 3 variants Figma →
  • Element/Select/Audio 3 variants Figma →
  • File Type/Audio 3 variants Figma →
  • File Type/CSV 2 variants Figma →
  • File Type/Document 3 variants Figma →
  • File Type/Folder 3 variants Figma →
  • File Type/generic 3 variants Figma →
  • File Type/Gif 3 variants Figma →
  • File Type/Image 3 variants Figma →
  • File Type/PDF 3 variants Figma →
  • File Type/Presentation 3 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Uploader
Slug: `uploader`
Domain: general · Category: input
Design: stable · Code: coded


## Description
File-upload region with drag-drop, audio-select, image-select, progress, error states. 40 sets across upload zones + selected-file rows.


## Import
```ts
import { Uploader } from "@dol/ui/uploader";
```
Source: `packages/@dol/ui/src/uploader/Uploader.tsx`


## Figma source
Page: Uploader
Sets: 40
Primary: .Upload/content/general file upload
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=12613-142269

Related

  • Input

    Coded

  • Select input

    Coded

  • DatePicker

    Coded

  • Slider

    Coded
  • Label

    Checkbox

    Coded
  • Active

    Chip

    Coded

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).