forked from retoor/devplacepy
blindxfishandClaude Opus 5
076f55f380
Pressing Ctrl+V with a screenshot on the clipboard now attaches it immediately instead of requiring a trip through the file picker. The clipboard reader lives in dp-upload behind a new opt-in `paste` boolean attribute: with it set, the component binds one paste listener on its closest form and routes the clipboard image files through the same handleFiles path as the picker and the drop target, so validation, limits, the terms gate and the hidden attachment_uids field are shared. A paste carrying plain text is never swallowed. It is opt-in rather than a form-wide default because a form may hold several upload buttons - projects.html has cover and logo beside the attachment one - and a default would attach one pasted screenshot to all of them. Set on _attachment_form.html, so every form including it inherits the behaviour (post composer, post edit, gists, projects, issues, screenshots), plus _comment_form.html, messages.html and the embed-mode skeleton AppChat builds. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
68 lines
3.2 KiB
HTML
68 lines
3.2 KiB
HTML
<div class="docs-content" data-render>
|
|
# 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
|
|
|
|
```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>
|
|
```
|
|
</div>
|
|
|
|
<div class="component-demo">
|
|
<div class="component-demo-title">Live example - select files to see the count and chips</div>
|
|
<dp-upload mode="field" field-name="demo" multiple label="Choose files"></dp-upload>
|
|
</div>
|
|
<script type="module">
|
|
import "{{ static_url('/static/js/components/AppUpload.js') }}";
|
|
</script>
|