# 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 `` 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 `` 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 `` 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 `

` (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 ```html <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> ```