[PR #4193] [MERGED] Custom dropzone implementation #6321

New Issue

OVERLORD · 2026-02-05T10:29:13+03:00

OVERLORD commented

2026-02-05 10:29:13 +03:00

📋 Pull Request Information

Original PR: https://github.com/BookStackApp/BookStack/pull/4193
Author: @ssddanbrown
Created: 4/24/2023
Status: ✅ Merged
Merged: 4/27/2023
Merged by: @ssddanbrown

Base: development ← Head: custom_dropzone

📝 Commits (10+)

23915c3 Started custom dropzone implementation
36116a4 Dropzone: Swapped fetch for XHR for progress tracking
a8fc29a Dropzone: started on design/ui of uploading
b21a900 Dropzone: Developed ux further
61d2ea6 Dropzone: Polished image manager elements
722c38d Image manager: fix upload control for drawing, updated styles
e36cdaa Updated attachments to work with new dropzone
9a17656 dropzone: Addressed existing todos, cleaned attachment ux
38e8a96 Removed dropzone from package and attribution list
a4a96a3 Dropzone: Adjusted styles for dark mode

📊 Changes

26 files changed (+625 additions, -482 deletions)

View changed files

📝 app/Http/Controllers/Images/GalleryImageController.php (+8 -3)
📝 lang/en/components.php (+4 -1)
📝 lang/en/entities.php (+2 -2)
📝 lang/en/errors.php (+1 -1)
📝 package-lock.json (+0 -6)
📝 package.json (+0 -1)
📝 readme.md (+0 -1)
📝 resources/icons/file.svg (+1 -4)
➕ resources/icons/upload.svg (+1 -0)
📝 resources/js/components/attachments.js (+24 -12)
📝 resources/js/components/dropzone.js (+208 -44)
📝 resources/js/components/image-manager.js (+23 -11)
📝 resources/js/services/clipboard.js (+11 -6)
📝 resources/js/services/dom.js (+37 -0)
📝 resources/js/services/http.js (+21 -0)
📝 resources/sass/_components.scss (+153 -297)
📝 resources/sass/_layout.scss (+9 -0)
📝 resources/sass/styles.scss (+12 -5)
📝 resources/views/attachments/manager-edit-form.blade.php (+27 -8)
📝 resources/views/attachments/manager-link-form.blade.php (+4 -1)

...and 6 more files

📄 Description

To reduce code bundle size, dependencies and to provide a little extra control in how we present uploads, and how we can re-use this logic.

Features

Revamped drag and drop item upload handling for image manager and attachment management, to provide a more modern integrated user experience.
Removed library to reduce JS bundle size.
Neatened up image manager styles.
Updated attachment manager interface to be simpler (Removed tabs).

Todo

Check image manager in different configs (drawing, lack of permission upload etc...)
Check and remove pending todos in code.
Ensure added text is extracted to lang files.
Test across browsers
- Tested across Firefox/Chrome (Fedora 38), Safari on MacOS. Those fine.
- Had issue with dropping files on Gnome web (Fedora 38) due to upload file items not being accessible, and having 0 size, but assumed to be a browser bug as I can see no reasoning, and Safari works fine.
Test dark mode.
Remove dropzone lib (package.json, readme attribution).

Docs updates

Use of window.uploadTimeout has been removed.
- Remove this from upload docs.
- Note in update/breaking-change notes.
  - This was only really used by dropzone file uploads. Timeouts can (and probably should) still be enforced server-side.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/BookStackApp/BookStack/pull/4193 **Author:** [@ssddanbrown](https://github.com/ssddanbrown) **Created:** 4/24/2023 **Status:** ✅ Merged **Merged:** 4/27/2023 **Merged by:** [@ssddanbrown](https://github.com/ssddanbrown) **Base:** `development` ← **Head:** `custom_dropzone` --- ### 📝 Commits (10+) - [`23915c3`](https://github.com/BookStackApp/BookStack/commit/23915c3b1a23837f30ca5a0def807869a224b1db) Started custom dropzone implementation - [`36116a4`](https://github.com/BookStackApp/BookStack/commit/36116a45d4047b68c5a6ecf2ab3bb19e3e40782a) Dropzone: Swapped fetch for XHR for progress tracking - [`a8fc29a`](https://github.com/BookStackApp/BookStack/commit/a8fc29a31ef9f657fca53308c9e95186a227d8d7) Dropzone: started on design/ui of uploading - [`b21a900`](https://github.com/BookStackApp/BookStack/commit/b21a9007c5df61e7b03b9099e37296bb403b44f6) Dropzone: Developed ux further - [`61d2ea6`](https://github.com/BookStackApp/BookStack/commit/61d2ea6ac794fc0dd970503a19252c3dae48c377) Dropzone: Polished image manager elements - [`722c38d`](https://github.com/BookStackApp/BookStack/commit/722c38d576ecd919ce527710172bb5281c7f3d1c) Image manager: fix upload control for drawing, updated styles - [`e36cdaa`](https://github.com/BookStackApp/BookStack/commit/e36cdaad0d56280aec7cd02c0c78e77dc0c4d9a1) Updated attachments to work with new dropzone - [`9a17656`](https://github.com/BookStackApp/BookStack/commit/9a17656f88ccf298a02e3a1e5b9a325a3bd63a1e) dropzone: Addressed existing todos, cleaned attachment ux - [`38e8a96`](https://github.com/BookStackApp/BookStack/commit/38e8a96dcd769dc9ce352c7c1d82f1e2cd25d08e) Removed dropzone from package and attribution list - [`a4a96a3`](https://github.com/BookStackApp/BookStack/commit/a4a96a3df772f01b762ad1ecbb74210e79398a9c) Dropzone: Adjusted styles for dark mode ### 📊 Changes **26 files changed** (+625 additions, -482 deletions) <details> <summary>View changed files</summary> 📝 `app/Http/Controllers/Images/GalleryImageController.php` (+8 -3) 📝 `lang/en/components.php` (+4 -1) 📝 `lang/en/entities.php` (+2 -2) 📝 `lang/en/errors.php` (+1 -1) 📝 `package-lock.json` (+0 -6) 📝 `package.json` (+0 -1) 📝 `readme.md` (+0 -1) 📝 `resources/icons/file.svg` (+1 -4) ➕ `resources/icons/upload.svg` (+1 -0) 📝 `resources/js/components/attachments.js` (+24 -12) 📝 `resources/js/components/dropzone.js` (+208 -44) 📝 `resources/js/components/image-manager.js` (+23 -11) 📝 `resources/js/services/clipboard.js` (+11 -6) 📝 `resources/js/services/dom.js` (+37 -0) 📝 `resources/js/services/http.js` (+21 -0) 📝 `resources/sass/_components.scss` (+153 -297) 📝 `resources/sass/_layout.scss` (+9 -0) 📝 `resources/sass/styles.scss` (+12 -5) 📝 `resources/views/attachments/manager-edit-form.blade.php` (+27 -8) 📝 `resources/views/attachments/manager-link-form.blade.php` (+4 -1) _...and 6 more files_ </details> ### 📄 Description To reduce code bundle size, dependencies and to provide a little extra control in how we present uploads, and how we can re-use this logic. ### Features - Revamped drag and drop item upload handling for image manager and attachment management, to provide a more modern integrated user experience. - Removed library to reduce JS bundle size. - Neatened up image manager styles. - Updated attachment manager interface to be simpler (Removed tabs). ### Todo - [x] Check image manager in different configs (drawing, lack of permission upload etc...) - [x] Check and remove pending todos in code. - [x] Ensure added text is extracted to lang files. - [x] Test across browsers - Tested across Firefox/Chrome (Fedora 38), Safari on MacOS. Those fine. - Had issue with dropping files on Gnome web (Fedora 38) due to upload file items not being accessible, and having 0 size, but assumed to be a browser bug as I can see no reasoning, and Safari works fine. - [x] Test dark mode. - [x] Remove dropzone lib (package.json, readme attribution). ### Docs updates - Use of `window.uploadTimeout` has been removed. - Remove this from upload docs. - Note in update/breaking-change notes. - This was only really used by dropzone file uploads. Timeouts can (and probably should) still be enforced server-side. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

OVERLORD added the pull-request label 2026-02-05 10:29:13 +03:00

OVERLORD closed this issue

2026-02-05 10:29:14 +03:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#6321