dp-upload
A tunable file-upload button: a compact button with a selected-count badge and a row of
removable filename chips, no thumbnail grid. It replaces the native <input type="file">
and the legacy attachment uploader everywhere in the app.
Source: static/js/components/AppUpload.js.
Modes#
Set with the mode attribute:
| Mode | Behaviour |
|---|---|
attachment (default) |
On select, each file is uploaded to endpoint immediately; the returned UIDs are kept in a hidden <input name="attachment_uids"> that submits with the surrounding form. |
direct |
Each file is uploaded to endpoint immediately with field-name plus any extraFields; emits events instead of writing a form field. Used for direct-to-app uploads (e.g. the project file browser). |
field |
No AJAX. Wraps a real <input type="file" name="{field-name}"> whose files submit with the form (e.g. the create-post inline image). |
Attributes#
| Attribute | Default | Description |
|---|---|---|
mode |
attachment |
attachment, direct, or field. |
label |
(none) | Optional button text shown beside the icon. |
multiple |
off | Allow selecting more than one file. |
directory |
off | Allow selecting a whole directory (webkitdirectory). |
accept |
(none) | Native accept filter, e.g. image/*. |
allowed-types |
(none) | Comma list of permitted extensions, e.g. .jpg,.png. |
max-size |
10 |
Maximum size per file, in MB. |
max-files |
10 |
Maximum number of files. |
show-chips |
off | Show the per-file name chips. Off by default, so only the (N) count badge appears on the button and no file name is ever shown. |
endpoint |
/uploads/upload |
Upload URL (attachment / direct). |
name |
attachment_uids |
Hidden field name for collected UIDs (attachment mode). |
field-name |
file |
File field name in upload requests / native field mode. |
Methods and properties#
| Member | Description |
|---|---|
open() |
Open the file picker programmatically. |
clear() |
Remove all selected files. |
extraFields |
Object of extra form fields sent with each upload (direct mode), e.g. { path }. |
Events#
dp-upload:uploaded (per file, detail {file, result}), dp-upload:error (detail
{file, message}), dp-upload:done (direct mode, after a batch), dp-upload:change
(detail {count}), dp-upload:busy (detail {busy}, fired once when uploads start
and once when all in-flight uploads finish, for driving a host loader/disabled state).
Usage#
<dp-upload multiple max-size="10" max-files="5" allowed-types=".jpg,.png,.pdf"></dp-upload>
<dp-upload mode="field" field-name="image" accept="image/*" label="Add image"></dp-upload>
Live example - select files to see the count and chips