Issues with Image uploader #595

New Issue

OVERLORD · 2026-02-04T21:22:10+03:00

OVERLORD commented

2026-02-04 21:22:10 +03:00

Originally created by @Abijeet on GitHub (Mar 11, 2018).

For Bug Reports

BookStack Version (Found in settings, Please don't put 'latest'): master branch
PHP Version: 7.0.x
MySQL Version: 10.1.x

Current Behavior

Please find the image below,

Following issue noticed here,

Message is wrong. Translation missing?
Clicking on X does not remove the image. Same happens if you upload a very large file. Need to refresh the page to get rid of the image. Even closing and reopening the image manager does not remove the image.
Long filename causing a scrollbar to appear.

Steps to Reproduce

Try to upload an invalid file into the image manager. Try uploading the file added to this issue here -
pewpewpewpewpewpewpewpewpewpewpewpewpewpew.txt

Fixes

I propose the following fixes,

Add translation
Get close button on image to work .
On close of dialog remove all invalid images.
Filename - Make a browser title tag.

Originally created by @Abijeet on GitHub (Mar 11, 2018). ### For Bug Reports * BookStack Version *(Found in settings, Please don't put 'latest')*: **master branch** * PHP Version: 7.0.x * MySQL Version: 10.1.x ### Current Behavior Please find the image below, ![bookstack-image-manager-issues](https://user-images.githubusercontent.com/1685517/37257302-c3909024-258d-11e8-9716-632a104cf76d.png) Following issue noticed here, 1. Message is wrong. Translation missing? 2. Clicking on X does not remove the image. Same happens if you upload a very large file. Need to refresh the page to get rid of the image. Even closing and reopening the image manager does not remove the image. 3. Long filename causing a scrollbar to appear. ### Steps to Reproduce Try to upload an invalid file into the image manager. Try uploading the file added to this issue here - [pewpewpewpewpewpewpewpewpewpewpewpewpewpew.txt](https://github.com/BookStackApp/BookStack/files/1800758/pewpewpewpewpewpewpewpewpewpewpewpewpewpew.txt) ### Fixes I propose the following fixes, 1. Add translation 2. Get close button on image to work . 3. On close of dialog remove all invalid images. 4. Filename - Make a browser title tag.

OVERLORD added the 🛠️ Enhancement label 2026-02-04 21:22:10 +03:00

OVERLORD closed this issue

2026-02-04 21:22:12 +03:00

OVERLORD commented

2026-02-04 21:22:15 +03:00

@ssddanbrown commented on GitHub (Mar 12, 2018):

Hi @Abijeet, Thanks for reporting.

Yeah, I agree, this could do with some improvement. In regards to fixes 3., I think this is supposed to be more of a warning icon than a close button which is maybe why it's not working as expected. Think it's part of the default dropzone styles bought into BookStack.

Also, Not too sure what you mean on fixes number 4, Name the image the same as the browser title?

@ssddanbrown commented on GitHub (Mar 12, 2018): Hi @Abijeet, Thanks for reporting. Yeah, I agree, this could do with some improvement. In regards to fixes 3., I think this is supposed to be more of a warning icon than a close button which is maybe why it's not working as expected. Think it's part of the default dropzone styles bought into BookStack. Also, Not too sure what you mean on fixes number 4, Name the image the same as the browser title?

OVERLORD commented

2026-02-04 21:22:20 +03:00

@Abijeet commented on GitHub (Mar 14, 2018):

I think this is supposed to be more of a warning icon than a close button which is maybe why it's not working as expected.

@ssddanbrown - Yea I realized that while looking at the documentation for dropzone.

I'm going to do the following for now,

Fix is_image appearing
Add a remove file link under failed attachments.
Clear images on close of dialog
Hovering on the filename inside the dropzone displays the entire name of the file, in a sort of tooltip. I'm going to change that to use the native tooltip (title attribute).

Please mark this for 0.21 if you don't mind.

@Abijeet commented on GitHub (Mar 14, 2018): > I think this is supposed to be more of a warning icon than a close button which is maybe why it's not working as expected. @ssddanbrown - Yea I realized that while looking at the documentation for dropzone. I'm going to do the following for now, 1. Fix is_image appearing 2. Add a remove file link under failed attachments. 3. Clear images on close of dialog 4. Hovering on the filename inside the dropzone displays the entire name of the file, in a sort of tooltip. I'm going to change that to use the native tooltip (title attribute). Please mark this for 0.21 if you don't mind.

OVERLORD commented

2026-02-04 21:22:25 +03:00

@Abijeet commented on GitHub (Mar 18, 2018):

Will also be fixing the following issue. Guess this was due to converting to use svg icon.

Adding margin-right: 6px to all .svg-icon might not be the best idea. The margin is only needed if there is text next to the icon.

@Abijeet commented on GitHub (Mar 18, 2018): Will also be fixing the following issue. Guess this was due to converting to use svg icon. Adding `margin-right: 6px` to all `.svg-icon` might not be the best idea. The margin is only needed if there is text next to the icon. ![screenshot-127 0 0 1-8000-2018 03 18-18-59-41](https://user-images.githubusercontent.com/1685517/37566413-b41fe21a-2ade-11e8-93b2-2587b1ab8c40.png)

OVERLORD commented

2026-02-04 21:22:32 +03:00

@ssddanbrown commented on GitHub (Mar 18, 2018):

@Abijeet Yeah, Good spot on the attachments screen.

The margin on all icons is mainly to achieve parity with the previous font icons used. Pretty much all icons are used next to text anyway, Only a few locations where they're not.

@ssddanbrown commented on GitHub (Mar 18, 2018): @Abijeet Yeah, Good spot on the attachments screen. The margin on all icons is mainly to achieve parity with the previous font icons used. Pretty much all icons are used next to text anyway, Only a few locations where they're not.

OVERLORD commented

2026-02-04 21:22:37 +03:00

@ssddanbrown commented on GitHub (Mar 24, 2018):

Fixed as of #754 being merged.

@ssddanbrown commented on GitHub (Mar 24, 2018): Fixed as of #754 being merged.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#595