BookStackApp
Images Select tool won't load images
Describe the Bug
Yesterday while editing a page on my local instance of Bookstack I tried to add images to the page. I ran into file issues while uploading (missing headers for jpegs). After resolving the file issues I went to upload the photos again and now the Image Select panel is stuck loading the previously uploaded images and no further uploads succeed.
The only items in the Bookstack Logs are:
nginx: [warn] the "listen ... http2" directive is deprecated, use the "http2" directive instead in /config/nginx/site-confs/default.conf:7
And the only items in the DB logs are:
[custom-init] No custom files found, skipping...
240707 19:24:24 mysqld_safe Logging to '/config/databases/f35135a15412.err'.
240707 19:24:24 mysqld_safe Starting mariadbd daemon with databases from /config/databases
Connection to localhost (127.0.0.1) 3306 port [tcp/mysql] succeeded!
[ls.io-init] done.
Steps to Reproduce
- Attempt to upload .jpeg files with file issues using the Image Select tool in the page editor.
- Close the panel and save the page.
- Attempt to upload photos to the page again.
Expected Behaviour
Previously uploaded images should appear in the Image Select panel, and new photos should successfully upload.
Screenshots or Additional Context
No response
Browser Details
Firefox 127.0.1 (64-bit)
Exact BookStack Version
BookStack v24.05.2
I ran into file issues while uploading (missing headers for jpegs). After resolving the file issues [...]
- What exactly do you mean by this? What did you change to resolve this?
- Can you provide details of the jpeg you uploaded that led to this? (file size & image dimensions).
Hey apologies for the slow response!
What exactly do you mean by this? What did you change to resolve this?
I airdropped photos from my iPhone which came in .HEIC format. I used the MacOS Preview app to re-export them as jpegs. It seems as though something went wrong with the export, but I'm not quite sure what. I've done that process before and the images have uploaded to Bookstack without issue. I attempted to fix it by deleting the incorrect exported images and re-exporting them with slightly different compression settings. I believe this fixed it, but I can't be sure as the upload dialogue still isn't working for me.
Can you provide details of the jpeg you uploaded that led to this? (file size & image dimensions).
The image dimensions were 5712 × 4284, and the size was around 2-3MB depending on the image.
Hi - I have the same issue after an upload of two images hang. Now trying to select an image hangs with these endless jumping balls. I guess some inconsistency like the database contains an image not on the disk.
... continued after some analysis ...
latest entries in table images are on the filesystem, BUT scaled-1680- and thumbs-150-150 are missing for the last two entries.
The first incomplete image is of this failed two-images-upload mentioned at the beginning. The second incomplete image was an upload tried after the failed two-images-upload.
Deleting these two rows fixes the dialog. But the next upload is not completing and it is broken again. So the generation of scaled-1680- and thumbs-150-150 seems to be broken currently.
I have nothing of a diagnostic nature to add, but just chiming in that I am having this issue as well. The photos in question were jpgs taken with a Samsung Galaxy. It's a new build of Bookstack (less than a week old) and these are the first images I've attempted to upload.
Hi, I had a very similar issue and for me got solved after some debugging. I'm using S3 storage.
The issue seemed to be the size of the image. I tried uploading a large image (3.2MB) with Drag And Drop to the Page, it failed adding it to the file but it uploaded it to my S3 bucket.
Then after going to the File selector I saw also the loading icon shared in the issue.
The response for the request to the gallery url ../gallery??page=1&uploaded_to=1 was 500 Internal Server Error.
Then on the logs I found:
2024/12/10 00:47:29 [error] 351#351: *690 FastCGI sent in stderr: "PHP message: PHP Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 49152 bytes) in /app/www/vendor/intervention/image/src/Drivers/Gd/Decoders/BinaryImageDecoder.php on line 43; PHP message: PHP Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 32768 bytes) in /app/www/vendor/laravel/framework/src/Illuminate/Log/LogManager.php on line 338" while reading response header from upstream, client: 192.168.57.26, server: _, request: "POST /images/gallery HTTP/1.1", upstream: "fastcgi://127.0.0.1:9000", host: "<REDACTED>", referrer: "<REDACTED>"
So seems that, cause it was uploaded, it now fails loading it. So I just went to my storage and deleted the conflicting image which I happened to remember which one it was. And that fixed it for me.
If you are not using S3 look for possible conflicting images in your the bookstack service disk. See the docs on file storage if there's some doubts there.
latest entries in table images are on the filesystem, BUT scaled-1680- and thumbs-150-150 are missing for the last two entries.
The first incomplete image is of this failed two-images-upload mentioned at the beginning. The second incomplete image was an upload tried after the failed two-images-upload.
The same also happened to me.
@ssddanbrown Looks like a bug possibly during large image upload, maybe failing before storing it might be a solution.
I changed the php.ini config as suggested in the documentation. And tried uploading the same 3.2MB file but it still fails: With config:
/config/php# cat php-local.ini
; Edit this file to override php.ini directives
upload_max_filesize = 100M
post_max_size = 100M
memory_limit = 256M
Throws the following error when uploading.
"Failed to handle image upload and/or create thumbnails due to system resource limits."
Error in logs/:
[error] 303#303: *10 FastCGI sent in stderr: "PHP message: PHP Fatal error: Allowed memory size of 268435456 bytes exhausted (tried to allocate 195897312 bytes) in /app/www/vendor/intervention/image/src/Drivers/Gd/Decoders/BinaryImageDecoder.php on line 43" while reading response header from upstream, client: 192.168.231.149, server: _, request: "POST /images/gallery HTTP/1.1", upstream: "fastcgi://127.0.0.1:9000", host: "<REDACTED>", referrer: "<REDACTED>"
Is it possible that the image is being stored in memory and the memory is not being freed after uploading?
@cesnietor Looks like you're still hitting your 256M memory limit.
Is it possible that the image is being stored in memory and the memory is not being freed after uploading?
Doubt that's the cause here, since it's attempting to allocate ~200 M. Maybe try 512M if available.
@ssddanbrown but why increasing though? the image is just 3.2MB and our config is set 256MB would it be due to all the other copies of the same image it tries to create? We also just have 3 other smaller images, so there aren't that many trying to be loaded. I'll try and report back. Thanks.
@cesnietor Filesize != memory size. A few MB as a compressed png/jpeg could be hundreds of MB in memory. Depends on the image itself though.
@ssddanbrown got it. So I updated to 512MB and it was able to upload it, and was added to the page successfully.
I still think there might be a bug when the config value is lower. Cause it fails correctly as we might expect:
but it shows an error when opening the existing images. The good thing is that the error gives some guidance.
The good news is that if this issue happens, even if the image was already uploaded you can make it work again by increasing the memory setting. So I'll consider that a workaround.
I'd suggest maybe not even storing it cause it won't work anyway (if not enough memory)
Just chiming in to say that deleting the images I uploaded from the disk, and then editing the PHP.ini file as noted above fixed the issue for me — the image selection and uploading tool is working for me now!
I am also affected by this issue. Originally reported here [BUG] Image preview stops to work after image upload. I'll give a summary here:
Depending on the jpg meta data the image preview will break or not. Here I got two jpg, the first one is breaking the preview, the second one not.
I also noticed, that in the uploader there is no Image uploaded successfully message, when the preview breaks.
I can fix the image preview with php artisan -f bookstack:cleanup-images.
Bookstack docker container version:
"build_version": "Linuxserver.io version:- v24.05.2-ls151 Build-date:- 2024-06-17T18:25:38+00:00",
"org.opencontainers.image.ref.name": "82e27df9721a1f94fb4400d4a53634547fafd13c",
FWIW the fix has not resolved the problem for my build. I have php_local.ini updated to a 512MB limit and also gave the container 2GB in docker compose. Memory usage doesn't seem to go above about 220MB when trying to handle an image. These are mostly normal JPGs around the 2-4MB mark although I have tried a larger PNG with the same result. For me, this happens with almost all images. The only image I have been able to upload that doesn't break anything is a user profile avatar (through a different screen, but it is in the Images table of the DB).
Sometimes I get a no-thumbnails error screen similar to the one in this issue: https://github.com/BookStackApp/BookStack/issues/5029#issuecomment-2129945756 but more often I just get the three-dot loading icon. Interestingly, there is no thumbnail (when I get that far) even for the one successful profile avatar image.
@deslea what logs do you have?
If using the dockerized container from https://github.com/linuxserver/docker-bookstack those are located in /config/log my logs were in nginx/error.log but try checking other places withing ../log. This might give a better sense on what's going on.
sigh Well, this is embarrassing. The fix works fine, I had a secondary problem that stopped it working in my case (basically I was editing php_local.ini in a directory that was the site of an old failed install instead of the actual install). It was the question about the logs that put me on the right track - the logs were empty and they shouldn't have been. I excluded permissions issues etc and eventually worked my way back to looking in the wrong place. Apologies for the red herring!
Just ran into this as well uploading a picture that is 2544 × 2753. We keep our memory down load at 32mb per php-fpm child. We don't really want to crank that to 512mb.
Restarting php-fpm I now get the stop sign looking icons with X in them posted above, but I can still use the images. Its just the thumbnails are broken.
A few MB as a compressed png/jpeg could be hundreds of MB in memory.
We used to use SimpleImage for image manipulation but we also were running out of memory due to this same issue. Both that project and this are using php-gd. We moved to ImageMagick and have not had any RAM issues with larger images. @ssddanbrown you mentioned about not wanting to change image driver here. Would adding support for ImageMagick with a fallback to gd to avoid these memory issues start leaning that to a maybe?
@cesnietor @ssddanbrown I also ran into this issue and setting the memory limit in the php-local.ini to memory_limit = 512M indeed resolved the issue miraculously. I do not see why this is the case.
Running BookStack v25.02
