` | Make this element a drop zone for the `avatar` slot. Adds the `upload-dragover` class while a file is being dragged over. | | `dj-upload-preview="avatar"` | Render an inline preview thumbnail (for image types) before the upload starts. | | `dj-upload-progress="avatar"` | The framework writes percentage progress (0–100) into the `value` attribute as the file streams. Works with native `` for free. | **The actual upload is triggered by the form submit** — clicking "Save avatar" tells djust to start chunking the queued file over the WebSocket and call `save_avatar` on the server when the bytes have all arrived. --- ## Step 3 — The server-side handler ```python # myapp/views.py — append to AvatarView from uuid import uuid4 from djust.uploads import validate_magic_bytes _ACCEPTED = {"image/jpeg": ".jpg", "image/png": ".png", "image/webp": ".webp"} class AvatarView(UploadMixin, LiveView): # ... mount() as before ... @event_handler def save_avatar(self, **kwargs): self.error = "" saved = False # Read each entry INSIDE the loop: the entry's temp file is # deleted once the loop moves past it. for entry in self.consume_uploaded_entries("avatar"): data = entry.data # Magic-byte check: decide the type from the content, not # from the client's filename or MIME type. kind = next((m for m in _ACCEPTED if validate_magic_bytes(data, m)), None) if kind is None: self.error = "That doesn't look like a JPEG, PNG or WebP image." continue # Never build a storage path from client_name: it is # attacker-controlled. safe_client_name is a path-safe # basename; the uuid directory keeps uploads from colliding. path = default_storage.save( f"avatars/{uuid4().hex}/{entry.safe_client_name}", entry.file ) self.avatar_url = default_storage.url(path) self.avatar_name = entry.client_name # display only; autoescaped self.avatar_size = len(data) saved = True if not saved and not self.error: self.error = "No file uploaded yet, or it was rejected (size or type)." @event_handler def reset_avatar(self, **kwargs): self.avatar_url = "" self.avatar_name = "" self.avatar_size = 0 self.error = "" ``` Three things to call out: 1. **`consume_uploaded_entries("avatar")`** is the way to read the bytes. It is a generator over the completed entries; each entry is yielded once and cleaned up after the loop moves on — calling it again returns nothing, which prevents accidental double-saves. Don't `list()` it and read the entries afterwards: by then their temp files are gone. 2. **`entry.client_name` is hostile input.** Build storage paths from `entry.safe_client_name` (a path-safe basename) under a server-generated directory, never from `client_name`. Use `client_name` only for display. 3. **Content decides the type.** The `accept=` attribute on the client and the `accept=` parameter on `allow_upload()` are convenience filters; they don't stop a determined attacker from POSTing arbitrary bytes. The `validate_magic_bytes` check decides what you store from the file's actual content. --- ## Step 4 — Style the drop zone ```html ``` The framework adds the `upload-dragover` class to the drop zone while a file is being dragged over the page (so the visual hover state activates without any JS from you). --- ## What just happened, end to end ``` Browser Server │ │ │ user picks "me.png" │ │ (just queued) │ │ │ │ user clicks "Save" │ │ ──── start upload ─────►│ (UploadMixin queues an │ │ upload session) │ │ │ ── chunk 1 (binary) ───►│ │ ── chunk 2 (binary) ───►│ (each chunk is 64 KB) │ ── chunk N (binary) ───►│ │ ◄ progress: 8% ─────────│ (interleaved with chunks) │ ◄ progress: 16% ────────│ │ ◄ progress: 100% ───────│ │ │ │ ─── upload complete ───►│ → calls save_avatar() │ │ ↓ consume_uploaded_entries() │ │ ↓ magic-byte check │ │ ↓ default_storage.save() │ │ ↓ self.avatar_url = ... │ ◄── HTML diff ──────────│ (drop zone replaced with preview card) ``` The whole thing is one WebSocket session — the same one carrying your normal events. `dj-form-pending` covers the in-flight UX on the submit button, the `` element auto-updates, and the final state change replaces the drop zone with the saved-avatar card via the standard diff cycle. --- ## Where to go next - **Multiple files at once:** raise `max_entries` (e.g. `max_entries=10`) and iterate `consume_uploaded_entries("attachments")`. The drop zone accepts a multi-select drag, and the progress event fires per-entry. - **Real-time preview-then-confirm:** show a "Looks good?" preview step BEFORE the upload starts by listening for `dj-upload`'s `change` event in JS and showing a confirmation modal. The upload only starts when the form submits. - **External storage (S3, GCS, Azure):** swap `default_storage` for a configured backend. Because the chunks land in `entry.file` (a real Django `UploadedFile`), any storage backend that accepts a file-like object works. - **Resumable uploads for very large files:** see the [Uploads guide § resumable uploads](/guides/uploads/) — the framework persists per-session chunk ranges, so a dropped WebSocket reconnects and resumes mid-file. - **Direct-to-S3 presigned uploads:** if you want the bytes to bypass the server entirely, use `@server_function` to mint a presigned URL and have the client PUT directly to S3 — same pattern as the [typeahead-with-server_function tutorial](/guides/tutorial-typeahead-server-function.md). The five-primitive recipe (`UploadMixin`, `allow_upload`, `dj-upload`, `dj-upload-progress`, `consume_uploaded_entries`) is the same shape every upload feature uses — single file, multiple files, image-with-crop, video-with-thumbnail, CSV import. Once the avatar uploader works, dragging in more file types is mostly new server-side validation.