microsoft / microsoft/simplechat
Drag and Drop + Paste Uploads in Chats
@paullizer is already working on this.
Since Feb 5, 2026.
- Dominant language
- Python
- Stars
- 152
- Forks
- 116
- Avg merge
- 7h 7m
- Merged PRs (30d)
- 122
Description
Add support in `Chats.html` for adding files via drag-and-drop and copy/paste (including pasted images), using the existing upload flow. Also enable multi-select on the file picker. Enforce a max of 5 files per action, upload sequentially, show progress feedback (“Uploading X of Y…”), and continue on partial failures.
### Problem
Today, users must rely on the file picker flow to attach files. This adds friction for common workflows like:
- Dragging files directly into chat
- Pasting screenshots from clipboard
- Uploading several related files quickly
### Goals
- Drag-and-drop files onto `Chats.html` to upload.
- Paste images/files into the chat input to upload.
- Allow multi-select from the file picker.
- Max 5 files per action (drag, paste, or picker).
- Sequential uploads (better UX and simpler error handling).
- Clear progress feedback and graceful partial failure handling.
### Non-Goals
- No changes to server-side storage or file processing behavior beyond what existing upload endpoints already support.
- No parallel/multi-threaded uploads in this iteration.
- No new file type support beyond existing accepted types (client-side should filter to match current constraints).
------
## Proposed UX
### File picker
- File picker allows selecting multiple files at once.
- If user selects more than 5 files, upload first 5 and show a warning toast.
### Drag-and-drop
- When dragging files over the page, show a full-screen overlay: “Drop files here (max 5)”.
- On drop:
- Hide overlay
- Enforce max 5 files (warn + truncate)
- Filter invalid file types (if applicable)
- Upload sequentially
### Paste
- Paste into `#user-input` should detect:
- Image blobs (screenshots)
- Other file-like clipboard items when available
- Convert pasted images into `File` objects named `pasted-image-{timestamp}.png`
- Enforce max 5 files (warn + truncate)
- Upload sequentially
### Progress + errors
- Show progress feedback: “Uploading 1 of 3…”
- If a file fails:
- Show error toast including filename
- Continue with remaining files
- After completion:
- Reset UI state
## Plan: Add Drag-Drop, Paste, and Multi-File Upload to Chat
Enable users to add files via drag-and-drop, copy/paste, and multi-select file button (up to 5 files), with sequential uploads, "Uploading X of Y..." progress feedback, and continuation on partial failures.
### Steps
1. **Update file input for multi-select** in chats.html
- Add `multiple` attribute to ``
2. **Add drag overlay HTML element** in chats.html
- Add hidden `
- Style inline or reference CSS class for full-page overlay
3. **Refactor `handleFileSelection` for multiple files** in chats.js
- Check `files.length > 5`, show warning toast with truncation message, slice to first 5
- Create `uploadFilesSequentially(files)` async function that loops through files
- Update button text to "Uploading 1 of X..." during each upload
- On individual file failure, show error toast with filename, continue with remaining files
- Call `resetFileButton()` after all uploads complete
4. **Add paste event handler** in chats.js
- Listen for `paste` event on `#user-input` textarea
- Extract image blobs from `clipboardData.items`, create File objects named `pasted-image-{timestamp}.png`
- Apply same 5-file limit logic with warning toast
- Pass through `UserAgreementManager.checkBeforeUpload()` then call `uploadFilesSequentially()`
5. **Add drag-and-drop event handlers** in chats.js
- Add `dragenter`, `dragover`, `dragleave`, `drop` listeners to document body or `.chat-container`
- Toggle `#drag-overlay` visibility on drag enter/leave (use counter for nested elements)
- On drop: prevent default, hide overlay, validate count (max 5 with toast), filter to accepted file types, call `uploadFilesSequentially()`
6. **Add CSS styles for drag overlay** in styles.css
- `#drag-overlay`: `position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999; display: none;` with centered content
- `#drag-overlay.visible`: `display: flex;` with flex centering
- Dashed border box and upload icon styling
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.