# Files and uploads

Adding files to Drive, a board cell or an email, following their upload, opening them in place and sharing them at a stated access level.

* Kind: pattern
* Page: https://design.werklist.com/patterns/files
* Version: 2.1.2

## When to use it

* Any screen that accepts a file: a Drive folder, a file cell on a board, an email being written, a public application form.
* Moving items between Drive folders by drag, with Move in the item menu as the keyboard path.

## When not to use it

* A progress dialog that blocks the page. The tray reports progress while the page stays in use.
* A second progress display beside the tray.

## Rules

* A file lands where it was dropped or chosen.
* Uploads continue when the screen that started them closes.
* Drive accepts files up to 50 GB. Attachments on a board or an email are up to 25 MB.
* A file that is too large is refused before it starts, with the limit in the sentence.
* Every drag has a menu equivalent.
* The tray is the one place that reports an upload.
* Documents save as you type, with no Save button.

## Anatomy

* Upload button: secondary button, 36 px, in the toolbar; opens the file picker for several files at once (--surface-control)
* Drop target: covers the folder or the email being written; radius 16 px; fill only, no border; the sentence Drop files to upload at 14/20 weight 500, centered (--nav-fill-active, --radius-2xl, --type-product-body, --brand-ink)
* Upload tray: fixed at the bottom right, 16 px from the right edge, 24 px on windows 1024 px and wider, and above the phone's bottom bar; 320 px wide, or the window minus 32 px; radius 12 px; padding 12 px (--surface-1, --elevation-3, --radius-xl, --space-3, --layer-toast)
* Progress bar: 38 by 19 px (30 by 15 px collapsed), radius 5 px, fill inset 1.5 px; a green gradient while running, the error fill on failure (--success, --success-deep, --error, --surface-control)
* Summary line: 13/18 weight 500; percent and size 12/16 in tabular digits (--type-product-dense, --type-product-caption)
* File row: status glyph 20 px; name 12/16, cut in the middle so the extension stays in view; percent in tabular digits; a 24 px glyph button, 44 px to touch on touch screens (--type-product-caption, --text, --text-muted)
* Collapsed tray: one row with the bar and the summary, radius 12 px (--radius-xl)

## States

* Drag over: The drop target tint and sentence appear, and leave when the files leave or drop (--nav-fill-active)
* Item dragged over a folder: The folder row takes the hover fill and full ink (--glass-fill-hover, --text)
* Queued: A row with the name and 0 percent (--text-muted)
* Uploading: The bar fills with the total percent; each row shows its own percent and Cancel (--success)
* Done: A check glyph; the rows clear once every upload has finished (--success-ink)
* Failed: The bar takes the error fill; the row keeps the reason and Retry (--error, --error-ink)
* Refused before start: The row shows the limit sentence, and nothing is sent (--error-ink)
* Collapsed: One row with the bar and the summary; a click expands it (--radius-xl)

## Keyboard

* Tab: Reaches Upload, then Collapse in the tray, then each row's Cancel, Retry or Dismiss
* Enter or Space on Upload: Opens the file picker
* Enter on an item: Opens the file in the editor or the preview
* Escape: Closes the preview, the share dialog or the move dialog and returns focus to the item

## Accessibility

* The summary line is announced when an upload starts, finishes or fails, not at each percent.
* Each file row is a progress bar named with the file name.
* The drop target is hidden from screen readers. The Upload button and Move are the accessible paths.
* Cancel, Retry and Dismiss carry the file name in their names, such as Cancel upload of cv-ana-kovac.pdf.
* Tray controls are 44 px to touch on touch screens.

## Content

* Summary: Uploading 3 files, 2 files uploaded, 1 file failed.
* Drop target: Drop files to upload.
* Limit: Files up to 25 MB. That one is too large. The sentence names the limit of the place the file was dropped.
* Failure: Upload failed. Check your connection and try again. Refusal: Upload was refused. You may not have access to save here. Cancel: Upload canceled.
* Empty folder: Nothing here yet. Upload files or add a folder.
* Share levels: Private, only you and people you grant access; Team, every signed in member can view; Public link, anyone with the link can view. People: Viewer, Editor.

## Tokens

* --nav-fill-active
* --brand-ink
* --surface-1
* --surface-control
* --elevation-3
* --radius-xl
* --radius-2xl
* --success
* --success-deep
* --success-ink
* --error
* --error-ink
* --text
* --text-muted
* --type-product-body
* --type-product-dense
* --type-product-caption
* --space-3
* --space-4
* --space-6
* --layer-toast
* --focus-ring