File upload
Drag-and-drop area with click-to-browse, plus a queue of files with progress.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
Click to upload or drag and drop
SVG, PNG, JPG or GIF (max. 800×400px)
PDF
Brand guidelines.pdf
100%
<div class="stack" style="width:100%;max-width:440px">
<div class="px-dropzone" role="button" tabindex="0" data-px-dropzone="fu-list" aria-describedby="fu-hint">
<span class="px-dropzone__icon"><svg class="px-icon" aria-hidden="true">…</svg></span>
<span><strong>Click to upload</strong> or drag and drop</span>
<small id="fu-hint">SVG, PNG, JPG or GIF (max. 800×400px)</small>
<input type="file" multiple hidden>
</div>
<div class="stack" id="fu-list" aria-live="polite">
<div class="px-file" data-px-dismissible><span class="px-file__icon">PDF</span><div class="px-file__main"><span class="px-file__name">Brand guidelines.pdf</span><span class="px-file__meta">720 KB</span><div class="px-progress"><div class="px-progress__track"><span class="px-progress__fill" style="--v:100%"></span></div><span class="px-progress__label">100%</span></div></div><button type="button" class="px-icon-btn" data-px-dismiss aria-label="Remove file"><svg class="px-icon" aria-hidden="true">…</svg></button></div>
</div>
</div>Usage
- Say the allowed types and size before upload.
- Show errors on the file row with a way to remove it.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
Error item
MP4
Product demo.mp4
<div class="px-file px-file--error" style="max-width:440px"><span class="px-file__icon">MP4</span><div class="px-file__main"><span class="px-file__name">Product demo.mp4</span><span class="px-file__meta">Upload failed. File is over 50 MB.</span></div><button type="button" class="px-icon-btn" aria-label="Remove file"><svg class="px-icon" aria-hidden="true">…</svg></button></div>API reference
| Class / attribute | Type | Description |
|---|---|---|
data-px-dropzone="listId" | attribute | Makes the area interactive and adds files to #listId. |
px-file · px-file--error | class | Queue item and error state. |
Figma properties
File upload / Dropzone8 variants · page “File Upload”Open
Drag-and-drop area with a click-to-browse fallback. Hover is also the drag-over state. Wrap a visually hidden <input type="file">; announce added files with aria-live.
| Property | Type | Values |
|---|---|---|
| Hint | Text | “SVG, PNG, JPG or GIF (max. 800×400px)” |
| State | Variant | Active Hover Focused Disabled |
| Direction | Variant | LTR RTL |
File upload / Item6 variants · page “File Upload”Open
A file in the upload queue: progress while uploading, check when complete, error message with remove action on failure.
| Property | Type | Values |
|---|---|---|
| State | Variant | Uploading Complete Error |
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-file-upload-icon | color-content-neutral-secondary | #475467 |
--px-file-upload-radius | radius-16 | 16px |
--px-file-upload-padding | spacing-24 | 24px |
--px-file-upload-padding-y | spacing-32 | 32px |
Accessibility
- The zone is a button: Enter/Space opens the file dialog.
- Announce added files with aria-live.