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).
paste	off	Attach images pasted anywhere in the surrounding <form> (clipboard screenshots).
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>