Pasting base64 images broken #1391

New Issue

OVERLORD · 2026-02-05T00:46:04+03:00

OVERLORD commented

2026-02-05 00:46:04 +03:00

Originally created by @sgvandijk on GitHub (Oct 2, 2019).

Describe the bug
In HTML it is possible to specify an image inline with a base64 encoded source, like:
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAkACQAAD/2wBDAAMCAgICAgM...">
Images created in Jupyter notebooks, like graphs generated with the matplotlib Python package, are for example of that form. In the latest version(s) of BookStack it is not possible to copy/paste those images, at least not in the WYSIWYG editor. Neither by copying or by dragging them. One has to save the image and upload them separately.

Steps To Reproduce
Steps to reproduce the behavior:

Create a new page with the WYSIWYG editor
Go to https://nbviewer.jupyter.org/github/empet/Math/blob/master/DomainColoring.ipynb
Right-click on one of the color wheel images and click 'Copy image'
Go back to the editor and try to paste (ctrl+v, right clicking does not give the option to paste)
Nothing happens
Open for instance the Gimp, press ctrl+v and the image is pasted correctly there

Alternatively:

Create a new page with the WYSIWYG editor
Go to https://nbviewer.jupyter.org/github/empet/Math/blob/master/DomainColoring.ipynb
Drag and drop one of the color wheel images into the bookstack editor; the image appears
Save the page; the image is not there
Click 'Edit' again, the image is there again, but saving again still doesn't show it
Delete the image, and try to drag and drop again; this doesn't work anymore and no image is shown

This second set of steps only works in Firefox, dragging from Chrome has the same result as trying to copy/paste, i.e. the image doesn't show up in the editor at all.

Expected behavior
Base64 encoded images can be copied or dragged into the editor, and are there after the page is saved.

Your Configuration (please complete the following information):

Exact BookStack Version (Found in settings): v0.27.4
PHP Version: 7.1
Hosting Method (Nginx/Apache/Docker): Docker (FROM php:7.1-apache-stretch)
Browsers: Firefox 69.0.1, Chrome 77.0.3865.90
OS: Ubuntu 18.04

Additional context
This could be related to #1651, but seemed different enough to report separately.

Originally created by @sgvandijk on GitHub (Oct 2, 2019). **Describe the bug** In HTML it is possible to specify an image inline with a base64 encoded source, like: `<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAkACQAAD/2wBDAAMCAgICAgM...">` Images created in Jupyter notebooks, like graphs generated with the `matplotlib` Python package, are for example of that form. In the latest version(s) of BookStack it is not possible to copy/paste those images, at least not in the WYSIWYG editor. Neither by copying or by dragging them. One has to save the image and upload them separately. **Steps To Reproduce** Steps to reproduce the behavior: 1. Create a new page with the WYSIWYG editor 2. Go to https://nbviewer.jupyter.org/github/empet/Math/blob/master/DomainColoring.ipynb 3. Right-click on one of the color wheel images and click 'Copy image' 4. Go back to the editor and try to paste (ctrl+v, right clicking does not give the option to paste) 5. Nothing happens 6. Open for instance the Gimp, press ctrl+v and the image is pasted correctly there Alternatively: 1. Create a new page with the WYSIWYG editor 2. Go to https://nbviewer.jupyter.org/github/empet/Math/blob/master/DomainColoring.ipynb 3. Drag and drop one of the color wheel images into the bookstack editor; the image appears 4. Save the page; the image is not there 5. Click 'Edit' again, the image is there again, but saving again still doesn't show it 6. Delete the image, and try to drag and drop again; this doesn't work anymore and no image is shown This second set of steps only works in Firefox, dragging from Chrome has the same result as trying to copy/paste, i.e. the image doesn't show up in the editor at all. **Expected behavior** Base64 encoded images can be copied or dragged into the editor, and are there after the page is saved. **Your Configuration (please complete the following information):** - Exact BookStack Version (Found in settings): v0.27.4 - PHP Version: 7.1 - Hosting Method (Nginx/Apache/Docker): Docker (FROM php:7.1-apache-stretch) - Browsers: Firefox 69.0.1, Chrome 77.0.3865.90 - OS: Ubuntu 18.04 **Additional context** This could be related to #1651, but seemed different enough to report separately.

OVERLORD added the 🔍 Pending Validation :cat2:🐈 Possible duplicate labels 2026-02-05 00:46:04 +03:00

OVERLORD closed this issue

2026-02-05 00:46:09 +03:00

OVERLORD commented

2026-02-05 00:46:18 +03:00

@ssddanbrown commented on GitHub (Oct 3, 2019):

Hi @sgvandijk,
Thanks for the detail and clear steps.
I'm pretty sure this is the same issue as #1651, AFAIK, it shouldn't matter how the original image data was defined on the source page, copying as image should produce the same result.

I've marked #1651 to be looked at for the next patch release. I've marked this for the same release, so this is at least checked after the fix is applied.

@ssddanbrown commented on GitHub (Oct 3, 2019): Hi @sgvandijk, Thanks for the detail and clear steps. I'm pretty sure this is the same issue as #1651, AFAIK, it shouldn't matter how the original image data was defined on the source page, copying as image should produce the same result. I've marked #1651 to be looked at for the next patch release. I've marked this for the same release, so this is at least checked after the fix is applied.

OVERLORD commented

2026-02-05 00:46:25 +03:00

@sgvandijk commented on GitHub (Oct 4, 2019):

Thanks, let me know if any more info is useful! I should have mentioned that I am not experiencing #1651 and copying other images does work for me. For instance copy-pasting or drag-and-dropping the first image in https://nbviewer.jupyter.org/github/empet/Math/blob/master/DomainColoring.ipynb, the RGB cube, works fine for me.

@sgvandijk commented on GitHub (Oct 4, 2019): Thanks, let me know if any more info is useful! I should have mentioned that I am not experiencing #1651 and copying other images does work for me. For instance copy-pasting or drag-and-dropping the first image in https://nbviewer.jupyter.org/github/empet/Math/blob/master/DomainColoring.ipynb, the RGB cube, works fine for me.

OVERLORD commented

2026-02-05 00:46:28 +03:00

@ssddanbrown commented on GitHub (Dec 21, 2019):

I have just commited a83a7f34f4 which should fix this. I've tested on both FireFox and Chrome on Ubuntu, and the defined test case works where it did not before. This fix is in master and will be part of the next release ,v0.28, which is due for the end of the year.

I'll therefore close this. If you continue to have problems after v0.28, Please open a new issue referencing this one.

Thanks again @sgvandijk for reporting and making the issue clear!

@ssddanbrown commented on GitHub (Dec 21, 2019): I have just commited a83a7f34f4d4c85bfb208eb1abfdd77743856680 which should fix this. I've tested on both FireFox and Chrome on Ubuntu, and the defined test case works where it did not before. This fix is in `master` and will be part of the next release ,v0.28, which is due for the end of the year. I'll therefore close this. If you continue to have problems after v0.28, Please open a new issue referencing this one. Thanks again @sgvandijk for reporting and making the issue clear!

OVERLORD referenced this issue

2026-02-05 10:17:41 +03:00

[PR #1391] [CLOSED] Enable syntax highlight for Mathematica, R & sTeX #5808

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#1391