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

nicolasmondada commented 6 years ago

Problems when uploading images to a Gallery block

Steps to Reproduce (for bugs)

Add a gallery block.
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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

Same issue

designsimply commented 6 years ago

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 commented 6 years ago

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

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

Screenshot:

2018-09-13-upload_image_json_error-network

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 commented 5 years ago

(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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 https://github.com/WordPress/gutenberg/issues/9142#issuecomment-417435856. 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 commented 5 years ago

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

katiebethbrown commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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.

earnjam commented 5 years ago

@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.

It would be on the web server rather than in the browser. Looks like your site you mentioned earlier in the thread might be on wordpress.com, so not sure if you can get to that.

We'll probably need one of the others in the thread who is self-hosted to let us know. I'll try to recreate the issue using WooCommerce though.

katiebethbrown commented 5 years ago

Hi @earnjam. I did a bit of digging, and I am seeing the following PHP error each time I try to add an image:

PHP Fatal error: Cannot redeclare add_settings_error() (previously declared in /wordpress/plugins/wpcomsh/2.3.30/vendor/automattic/wc-calypso-bridge/inc/wc-calypso-bridge-mailchimp-add-settings-error.php:25) in /wordpress/core/4.9.8/wp-admin/includes/template.php on line 1418

It may be somehow related to this: https://github.com/Automattic/wc-calypso-bridge/issues/55 which also throws this error doing some sort of image processing when WooCommerce is installed (though that issue seems to be unrelated to Gutenberg).

earnjam commented 5 years ago

Yeah, that would be unrelated to Gutenberg. A Fatal Error during processing on a REST API response would cause the JSON response to be invalid (or blank), though, so I think that's the issue here. Probably also why others have been unable to recreate it, since it's the wc-calypso-bridge triggering it.

antpb commented 5 years ago

I am able to reproduce without WooCommerce on my local. I uploaded five 6mb files. I have a feeling it has something to do with autosave as I only notice the JSON error when autosave starts happening. If that is the case, https://github.com/WordPress/gutenberg/issues/5936 is related. Once autosave is completed, the images show as expected. We need a way for autosave to wait while uploads are happening. Thinking a state similar to https://github.com/WordPress/gutenberg/pull/4090

abrightclearweb commented 5 years ago

I'm getting the "The response is not a valid JSON response." error with inserting an Audio block. I'm using WordPress 5.0-beta1-43823 on Windows 10 64-bit.

I'm using Local by Flywheel, and the PHP error log says:

[26-Oct-2018 20:49:19 UTC] PHP Fatal error:  Uncaught Error: Call to undefined function wp_read_audio_metadata() in /app/public/wp-admin/includes/image.php:149
Stack trace:
#0 /app/public/wp-includes/rest-api/endpoints/class-wp-rest-attachments-controller.php(178): wp_generate_attachment_metadata(17, '/app/public/wp-...')
#1 /app/public/wp-includes/rest-api/class-wp-rest-server.php(936): WP_REST_Attachments_Controller->create_item(Object(WP_REST_Request))
#2 /app/public/wp-includes/rest-api/class-wp-rest-server.php(321): WP_REST_Server->dispatch(Object(WP_REST_Request))
#3 /app/public/wp-includes/rest-api.php(295): WP_REST_Server->serve_request('/wp/v2/media')
#4 /app/public/wp-includes/class-wp-hook.php(286): rest_api_loaded(Object(WP))
#5 /app/public/wp-includes/class-wp-hook.php(310): WP_Hook->apply_filters('', Array)
#6 /app/public/wp-includes/plugin.php(515): WP_Hook->do_action(Array)
#7 /app/public/wp-includes/class-wp.php(373): do_action_ref_array('parse_request', Array)
#8 /app/public/wp-includes/class-wp.php(713): WP->parse_request('')
#9 /app/ in /app/public/wp-admin/includes/image.php on line 149

The weird part is that the files have uploaded to the Media Library but aren't visible from the editor, unless I refresh the page.

Niklassandqvist commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

talldan commented 5 years ago

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

carolynzinn commented 5 years ago

@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 commented 5 years ago

@carolynzinn I´ve created a new issue for this. https://github.com/WordPress/gutenberg/issues/12532

Alexufo commented 5 years ago

Watch apache logs. In my case

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

JeffersonGitHub commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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

JeffersonGitHub commented 5 years ago

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 https://github.com/WordPress/gutenberg/issues/8935#issuecomment-454206901, or mute the thread https://github.com/notifications/unsubscribe-auth/AIhOSFb_JJv3f-O8_orK3cFoYd3gXuvhks5vDRZvgaJpZM4V65RY .

Alexufo commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

@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 (https://github.com/WordPress/gutenberg/pull/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 - https://github.com/WordPress/gutenberg/issues/12532.

couponrim commented 5 years ago

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.

I have uninstalled this plugin
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.
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 commented 5 years ago

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

talldan commented 5 years ago

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 commented 5 years ago

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

talldan commented 5 years ago

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

borayeris commented 5 years ago

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 commented 4 years ago

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

WordPress / gutenberg