Issues when uploading images to a Gallery block: The response is not a valid JSON response.

[nicolasmondada]

Problems when uploading images to a Gallery block

Steps to Reproduce (for bugs)

1. Add a gallery block.
2. Select 4-5 images (4-10Mb each) from your local drive and upload them.

Using Chrome 68.0.3440.106 + WP 4.9.8 + Gutenberg 3.5.0

Expected Behavior

Images should be uploaded to the gallery and displayed.

Current Behavior

Initially images seem to upload alright and a preview is shown on the gallery. A few seconds later an error message is displayed on the Gallery block:
The response is not a valid JSON response.

Screenshots / Video

[designsimply]

Do you have any plugins installed that affect the API?

Are you able to check the Network tab in your browser developer tools to see if you can find an API call with an error and what the response is?

[klemenzagar91]

It helped when I uploaded all the photos beforehand in the "Media" file. And then I was inserting them to gallery instead of uploading them directly to gallery interface.

[Karlheinzniebuhr]

Same issue

[designsimply]

Are you able to check the Network tab in your browser developer tools to see if you can find an API call with an error and what the response is?

[ktyfuller604]

Running the Network tab from browser developer tools provided the following error

Name: Media Status: 500 Type: Fetch Initiator: VM1479:1

Screenshot:

Properties of the image I tried to upload:

Filename: 2017-08-25-High Trestle Bridge (7).jpg
Size: 8.31 MB

Browser Properties:

Chrome Version 68.0.3440.106 (Official Build) (64-bit)

[katiebethbrown]

(I noted this on #9720 as well)

I am seeing the same error - "The response is not a valid JSON response" - when adding an image block and either choosing the upload dialog or dragging the image in.

When I try dragging the image straight into the editor, the image appears and flashes in and out. If I preview the post, the image shows. If I update and then view the published version the image is not there.

I have tried with multiple different images and all have the same result.

I am using FF Quantum 62.0.2 (64-bit).

GIF of what I am seeing: https://cld.wthms.co/XCDHZH

I am seeing a 500 error in the Network Monitor:

Request URL: https://test313036383.blog/wp-json/wp/v2/media
Request Method: POST
Status Code 500

Error in Network Monitor: https://cld.wthms.co/8udIkK

[designsimply]

@ktyfuller604 @katiebethbrown thank you for posting screenshots of the Network tab! I see that the media API returns a 500 error, but I can't see the response. There is something else I would like to check on though. Can you go to your Plugins page and install/activate the Health Check plugin and then go to Dashboard > Health Check > Debug and copy everything from the Server section into a reply here?

[designsimply]

Also wanted to add a quick note to say that I tested this using WordPress 4.9.8 and Gutenberg 3.9.0 and Firefox 62.0 on macOS 10.13.6 and image uploads to the gallery worked normally in my test. Here is the success response for the media call showing in my browser dev tools Network panel:

The images were not large, they were about 1.9MB and 2.6MB respectively.

[ktyfuller604]

Hey, @designsimply I did some additional testing:

• A different site I have on the same account using the same image with the same version of Gutenberg (3.9.0) does not have the same issue. I've included server details for both sites.
• I also tested to see if I added a text block first, then added the image does the error still occur (answer: yes)
• I tried to get the response code from the Media API for you, but it says "This request has no response data available".

Server Details for Site with the Error (Gutenberg 3.9.0, WordPress Version 4.9.8)

Server architecture	Linux 4.9.0-8-amd64 x86_64
PHP Version	7.0.31 (Supports 64bit values)
PHP SAPI	fpm-fcgi
PHP max input variables	6144
PHP time limit	1200
PHP memory limit	256M
Max input time	1200
Upload max filesize	2047M
PHP post max size	2047M
cURL Version	7.61.0 OpenSSL/1.1.0f
SUHOSIN installed	No
Is the Imagick library available	No

Server details for the site that does not have the error (Gutenberg 3.9.0, WordPress Version 4.9.8)

Server architecture	Linux 4.9.0-7-amd64 x86_64
PHP Version	7.0.31 (Supports 64bit values)
PHP SAPI	fpm-fcgi
PHP max input variables	6144
PHP time limit	1200
PHP memory limit	256M
Max input time	1200
Upload max filesize	2047M
PHP post max size	2047M
cURL Version	7.61.0 OpenSSL/1.1.0f
SUHOSIN installed	No
Is the Imagick library available	No

I hope this helps!

[designsimply]

All right, so it looks like both the working setup and the non-working setup have exactly the same max filesize settings. 🤔

The next level will be to check the server error logs for any related errors that show up there at the time the problem happens. I searched and found an article that has some tips about how to do that at https://www.1and1.com/cloud-community/learn/web-server/server-management/how-to-fix-http-error-code-500-internal-server-error/

A similar problem was reported in #9142 and the error logs revealed a problem with upload_is_user_over_quota() and a fix was already patched in the core WordPress project (core/43462), see #9142 (comment). And if the same error is showing in your server error logs then that patch should be the fix, but if you see a different error then we'll need to continue debugging.

[benbowler]

Since the Gutenburg update I'm also seeing this issue on my Wordpress site. No image uploads will work.

[katiebethbrown]

@designsimply Here's what I'm seeing in the server section from Health Check:

### Server ###

Server architecture: Linux 4.9.0-7-amd64 x86_64
PHP Version: 7.0.31 (Supports 64bit values)
PHP SAPI: fpm-fcgi
PHP max input variables: 6144
PHP time limit: 1200
PHP memory limit: 256M
Max input time: 1200
Upload max filesize: 2047M
PHP post max size: 2047M
cURL Version: 7.61.0 OpenSSL/1.1.0f
SUHOSIN installed: No
Is the Imagick library available: No

There is no response listed, but these are the Response Headers:

access-control-allow-headers: Authorization, Content-Type
access-control-expose-headers: X-WP-Total, X-WP-TotalPages
cache-control: no-cache, must-revalidate, max-age=0
content-type: application/json; charset=UTF-8
date: Sun, 30 Sep 2018 01:02:22 GMT
expires: Wed, 11 Jan 1984 05:00:00 GMT
link: <https://test313036383.blog/wp-json/>; rel="https://api.w.org/"
p-lb: lb1.q1.sat
p-ws: web118.q10.sat
server: nginx
status: 500
strict-transport-security: max-age=86400
x-ac: 3.sea _proxy_upstream_1
x-content-type-options: nosniff
x-robots-tag: noindex
x-wp-nonce: c09e9aecfc

Screenshot of the Response Headers as well: https://cld.wthms.co/EwIbIh

I also noted that I was able to upload the image to the media library and add it from there without issue.

I tried uploading the image from the photo block in the post from two different machines (Mac and Chromebook) and with and without a proxy server and had the same result in all situations. It appears as if it is timing out.

[katiebethbrown]

I have done a bit more troubleshooting and I think I have this narrowed down. I was able to upload the image to the image block in the post without issue when I used Troubleshooting mode in the Health Check plugin and turned just Gutenberg back on.

So I returned to normal operation and tried deactivating plugins one by one.

Once I deactivate WooCommerce the image adds without a problem. When I reactivate WooCommerce I get the error again.

@ktyfuller604 Any chance you could try deactivating Woo and see if you see the same behavior?

[katiebethbrown]

One more thing to note. I tried this in Firefox today (with WooCommerce re-activated to cause the error to occur) out of curiosity, and see this in the Response area of the Network tab when the media item with the 500 error is selected:

SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

Screenshot: http://cld.wthms.co/zRppPC

[ktyfuller604]

@katiebethbrown You are definitely on to something. I deactivated Woo and could add an image without error, immediately reactivated, tried again, got the JSON error again.

[vfavrat]

Hello. I have several issues. I can't add an image/video neither by drag and drop, neither by upload. I have the message "The response is not a valid JSON response."
I use a multisite installation with several plugins and themes, but with 280 sites I can't deactivate plugins. I will try on a local installation when I will have time.

Another issue is about embed media. It is impossible with videos from https://tube.ac-lyon.fr
The error message is (in French) : "Désolé, il est impossible d’embarquer ce contenu."
But it is possible by the classic way (without Gutenberg).

[earnjam]

With a 500 status response, it is often going to be a PHP error. Can any of you experiencing the issue check the PHP error log after triggering the error to see what it might be showing?

[katiebethbrown]

@earnjam I'm in FF. Where can I find the PHP error log? Let me know and I can pass along what I see there.

[Niklassandqvist]

Hi,

I have the same issue? I can attach images from media library but not via the direct upload in gutenberg. I tried on my site running host on ngix and on windows iis. Its only on Windows IIS this is an issue.

[alphons]

Ik think the image upload is not the problem, the image is uploaded, but the response after is a 404, which is not Json.
https://...../wp-admin/undefined
So the new Gutenberg is not that Good on IIS .... ;-)

[Niklassandqvist]

Yes, I actually noticed that 404. Hope someone will look into this further.

Edit...

It is quite important i think, its kind of basic editing to insert an image to a page or post... It has to work.

[talldan]

Hey @Niklassandqvist. Thanks for commenting about the problem on IIS. Would you be able to create a separate issue so that it can be tracked?

The one that you're commenting on here was related to multiple image uploads and has now been resolved.

[Niklassandqvist]

OK, I will try, but Im new (noob) to github.

[talldan]

Thanks! Let me know if you need any help with anything. 😄

[carolynzinn]

@talldan the issue has been resolved? I am still experiencing it.
WordPress 4.9.8
Gutenberg 4.6.1
No other plugins installed

My developer network panel shows a 404 error when trying to load /wp-admin/undefined in plugins/gutenberg/build/block-library/index.js

[Niklassandqvist]

@carolynzinn I´ve created a new issue for this. #12532

[Alexufo]

Watch apache logs. In my case

problem was in "libgomp: Thread creation failed: Resource temporarily unavailable"

[JeffersonGitHub]

@talldan the issue has been resolved? I am still experiencing it.
I got this message on Chrome console when I try insert an image:

Uncaught (in promise) TypeError: Cannot read property 'url' of undefined
at We (block-library.min.js?ver=2.2.9:12)
at onFileChange (block-library.min.js?ver=2.2.9:12)
at m (editor.min.js?ver=9.0.4:55)
at editor.min.js?ver=9.0.4:55
at tryCatch (wp-polyfill.min.js?ver=7.0.0:3)
at Generator.invoke [as _invoke] (wp-polyfill.min.js?ver=7.0.0:3)
at Generator.t.(anonymous function) [as throw] (http://[mysite]/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=7.0.0:3:21100)
at r (editor.min.js?ver=9.0.4:12)
at s (editor.min.js?ver=9.0.4:12)

[Amparose]

I have Wordpress Version 5.0.3 on a shared linux host and I am getting this error. It seems to upload the first image but then fails for every other. Subsequent attempts to upload also fail with this error. Tried with the Health Check plugin enabled and still get the same issue.

Not sure why this is marked closed...

[Alexufo]

@Amparose have you the same problem during uploading in media without guterberg interface?

[JeffersonGitHub]

How I can disable Gutenberg? Em seg, 14 de jan de 2019 21:44, Alexandr <notifications@github.com escreveu:

…

@Amparose <https://github.com/Amparose> have you the same problem during uploading in media without guterberg interface? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#8935 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIhOSFb_JJv3f-O8_orK3cFoYd3gXuvhks5vDRZvgaJpZM4V65RY> .

[Alexufo]

How I can disable Gutenberg? Em seg, 14 de jan de 2019 21:44, I
I

I mean try upload image via media library. Looking for a plugin for disable gutenberg

/wp-admin/upload.php

[Amparose]

@Alexufo it looks like I am having issues uploading through the Media Library gives an error "HTTP error." but it uploaded 5 out of 8 images instead of only one. Also, using the single-file browser uploader worked once but then gave me an internal server error 500. So I'm not sure what is happening.

Oh and my mistake this site is on a VPS not shared hosting.

[Alexufo]

@Amparose if you have 500 error in Media library it is a not problem with gutenberg. Your server kill imagick process during resizing. I had the same issue 90% images with 500 error. Please write to support or looking for apache error log where you will see 500 error reason.

[talldan]

@JeffersonGitHub Sorry for the late response. To give you some more background info, there was a specific issue with Gutenberg image uploads for galleries. Previously, multiple uploads were handled in parallel and many servers ran out of memory during the process. The fix was to queue uploads and handle them one-by-one (#11565). That fix was released in Gutenberg back in November.

The 'The response is not a valid JSON response.' is a very generalised message that happens when the server has just about any fatal issue (like running out of memory), so that's why there are still reports of this. If the same error happens outside of Gutenberg when uploading in the media library, it likely points to some sort of issue with the server configuration rather than Gutenberg.

There's also a known issue in IIS that's open at the moment -
#12532.

[couponrim]

I got the same issue like this, and finally I've found out that the PWA(Progressive Web App) Plugin causes this issue.
This WordPress plugin conflicts to the Gutenberg editor.

1. I have uninstalled this plugin
2. then I login to my website directory where my WordPress has installed in the main Public html folder via SFTP or FTP, I removed all the rest the files and scripts that created by PWA plugin. How to know that script created by PWA plugin? it has PWA prefix at the front of its filename.
3. Then I go back to my website upload images via Gutenberg editor, it works fine. All the issues image upload has gone.
   ...
   I found out this issue via console log when I upload image to Gutenberg editor. It show errors related to PWA plugin.
   ....
   If you are using Progressive web app plugin on your WordPress site got this issue, please check this before you take any other steps.
   ...
   If you don't install this plugin but got issue just install WordPress health check and troubleshooting plugin to find out which plugins or themes conflict to Gutenberg editor.

[youknowriad]

Reopening here as it seems that this still happens from time to time especially when uploading a big number of photos simultaneously.

[talldan]

I tried some different tests on a local VVV dev server. I think there's more of a relationship between the file size of images and the error. I didn't have too many issues uploading 200 images (a mixture of jpgs, pngs, and gifs) to a gallery, but as soon as I tried a few very large 80mb jpgs (on my admittedly more powerful than average local server) I started seeing errors:

[22-Feb-2019 07:02:31 UTC] PHP Fatal error:  Maximum execution time of 30 seconds exceeded in /srv/www/wordpress-trunk/public_html/build/wp-includes/class-wp-image-editor-imagick.php on line 155
[22-Feb-2019 07:08:24 UTC] PHP Fatal error:  Maximum execution time of 30 seconds exceeded in /srv/www/wordpress-trunk/public_html/build/wp-includes/class-wp-image-editor-imagick.php on line 502
[22-Feb-2019 07:11:19 UTC] PHP Fatal error:  Maximum execution time of 30 seconds exceeded in /srv/www/wordpress-trunk/public_html/build/wp-includes/class-wp-image-editor-imagick.php on line 366
[22-Feb-2019 07:11:22 UTC] PHP Fatal error:  Maximum execution time of 30 seconds exceeded in /srv/www/wordpress-trunk/public_html/build/wp-includes/class-wp-image-editor-imagick.php on line 358

The code causing the timeout:

// line 155:
$this->image->readImage( $filename );
// line 358:
$this->image->resizeImage( $dst_w, $dst_h, $filter, 1 );
// line 366:
$this->image->unsharpMaskImage( 0.25, 0.25, 8, 0.065 );
// line 502:
$this->image->cropImage( $src_w, $src_h, $src_x, $src_y );

All are image operations that I would expect to be slower with bigger images.

At the moment, each image is still uploaded sequentially, so it seems logical that the filesize is more of a factor.

I imagine there's not much that can be done client-side. The only thing I did notice is that each time an image is uploaded, the POST request (that uploaded the image) is followed straight away by a GET request for the media data, which is totally unnecessary, so that could be one place that Gutenberg is less than optimal. This is probably a byproduct of the way selectors/resolvers work. I can look into a way to improve that.

edit: Just noting that in testing, image uploading does seem a lot more robust in the media uploader, so potentially there are performance differences between the REST API and async-upload.php.

[youknowriad]

Thanks for digging here @talldan Can we create a trac ticket about it and close this issue?

[talldan]

Created a trac ticket here:
https://core.trac.wordpress.org/ticket/46309#ticket

[borayeris]

I had the same problem on 2 sites.

1st one is caused by iThemes Security. I used restrict REST API but Gutenberg needs it.
2nd one was a plugin named Fullscreen Galleria which was adding codes to REST page that breaks the JSON.

[Rapkar]

this error for Gutenberg, when i disable these plugin .this error fixes