Jump to content
dragan

Image upload broken

Recommended Posts

All of a sudden image-upload seems broken. No matter if I want to upload one single image or several images.

Chrome console says:

Uncaught SyntaxError: Unexpected token 
 in JSON at position 414
    at JSON.parse (<anonymous>)
    at Function.parseJSON (JqueryCore.js?v=1535110864:2)
    at XMLHttpRequest.<anonymous> (InputfieldImage.js?v=122-1535110864:1973)
      
				// File uploaded: called for each file
				xhr.addEventListener("load", function() {
					xhr.getAllResponseHeaders();
					var response = $.parseJSON(xhr.responseText); // line 1973

The spinning animation GIF keeps on spinning forever...

I thought I have seen a forum thread about such an error, but I can't find it anymore.

If I inspect https://dev.mysite.com/backstage/page/edit/?&amp;id=11203&amp;InputfieldFileAjax=1 I only see headers, no content.

content-type: application/octet-stream (in request header)

in response headers:

x-tracy-ajax: 1
x-xss-protection: 1; mode=block

Does anyone know what could cause this?

PW 3.0.111 / PHP 7.2.8

Share this post


Link to post
Share on other sites

Have you looked at browser dev tools Network Tab - Response section?

Does this help: 

 

  • Like 1

Share this post


Link to post
Share on other sites

Yes, that's where I was looking. I have SessionHandlerDB installed and running. I get the same error as you mentioned in that forum thread you linked (your last post).

Share this post


Link to post
Share on other sites
1 minute ago, dragan said:

Yes, that's where I was looking. I have SessionHandlerDB installed and running. I get the same error as you mentioned in that forum thread you linked (your last post).

Sorry I am a little confused - by the same error, do you mean the "unexpected token", or do you mean the same content in the Response?

Unexpected token errors typically mean that html is being returned instead of JSON, so you just need to figure out what HTML is in the response and find the source of it. In the example I linked to it was because the session had expired and PW was returning the login prompt, but HTML in the reponse could be from many other issues as well.

 

  • Like 1

Share this post


Link to post
Share on other sites
3 hours ago, adrian said:

Sorry I am a little confused - by the same error, do you mean the "unexpected token", or do you mean the same content in the Response?

 

unexpected token

I'm confused too, especially since I came across that same error ages ago, but I can't remember what I did to resolve it.

I deinstalled the Image Extra fieldtypes / modules, and tried again. *sigh* 

Guess I'll have to manually deactivate modules till I find the culprit...

Share this post


Link to post
Share on other sites
1 minute ago, dragan said:

Guess I'll have to manually deactivate modules till I find the culprit...

Just use Tracy's Module Disabler panel - easy to do them all at once and then re-enable.

But to clarify, is there any content in the "Response" section?

  • Like 1

Share this post


Link to post
Share on other sites

I've disabled now ALL modules with Tracy, and nothing changed.

Problem is: Sometimes the images are in fact getting saved, sometimes not. 

The JS errors remain.

It's really quite frustrating... I mean, the JS file that apparently triggers the error is a PW core file, not some extra-module.

I even tried with or without SessionHandlerDB - doesn't seem to make a difference (like it was suggested in the other forum thread).

(I also made sure my ad-blocker doesn't accidentally block resources, btw)

Edited by dragan
added note about ad-blocker

Share this post


Link to post
Share on other sites

Have you tried Tracy in Strict mode?

You can toggle it on from the Panel Selector.

Also, just to confirm that you have the "Disable Cache" option checked in the dev toolbar? 

  • Like 1

Share this post


Link to post
Share on other sites

Whoa, I think I found the culprit... It seems like one of my hooks is being triggered also in the backend...

[{"error":false,"message":"Added file: tumblr_omeiihbv8g1tu3avjo1_1280.jpg","file":"\/site\/assets\/files\/11482\/tumblr_omeiihbv8g1tu3avjo1_1280.jpg","size":203248,"markup":"<li id='file_5f68e2495aab81b39cb738510564e6dd' class='ImageOuter gridImage ui-widget'><span class=\"aos_moveAssets\"><i title=\"Move to last\" class=\"fa fa-step-backward\" data-down><\/i><i title=\"Move to first\" class=\"fa fa-step-forward\" data-up><\/i><\/span><div class='gridImage__tooltip'>
<div class='scrollTable'><table><tr><th>Dimensions<\/th><td>1280x854<\/td><\/tr><tr><th>Filesize<\/th><td>198&nbsp;kB<\/td><\/tr><tr><th>Variations<\/th><td>0<\/td><\/tr><\/table><\/div>\n\t\t\t<div class='gridImage__overflow'>\n\t\t\t\t<img src=\"\/site\/assets\/files\/11482\/tumblr_omeiihbv8g1tu3avjo1_1280.0x260.jpg?nc=1535996482\" alt=\"\" data-w=\"1280\" data-h=\"854\" data-original=\"\/site\/assets\/files\/11482\/tumblr_omeiihbv8g1tu3avjo1_1280.jpg?nc=10\" data-focus=\"50 50 0\"  \/>\n\t\t\t<\/div>\n\t\t\t\n\t\t\t\t<div class='gridImage__hover'>\n\t\t\t\t\t<div class='gridImage__inner'>\n\t\t\t\t\t\t<label for='' class='gridImage__trash'>\n\t\t\t\t\t\t\t<input class='gridImage__deletebox' type='checkbox' name='delete_gallery_repeater11482_5f68e2495aab81b39cb738510564e6dd' value='1' title='Delete' \/>\n\t\t\t\t\t\t\t<span class='fa fa-trash-o'><\/span>\n\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t<a class='gridImage__edit'>\n\t\t\t\t\t\t\t<span>Edit<\/span>\n\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t\t<div class='ImageData'>\n\t\t\t\t\t<h2 class='InputfieldImageEdit__name'><span contenteditable='true'>tumblr_omeiihbv8g1tu3avjo1_1280<\/span>.jpg<a href=\"\/site\/assets\/files\/11482\/tumblr_omeiihbv8g1tu3avjo1_1280.jpg\" target=\"_blank\" class=\"aos_downloadAsset\" download title=\"Download\"><i class=\"fa fa-download\"><\/i><\/a><\/h2>\n\t\t\t\t\t<span class='InputfieldImageEdit__info'>198&nbsp;kB, 1280&times;854 <\/span>\n\t\t\t\t\t<div class='InputfieldImageEdit__errors'><\/div>\n\t\t\t\t\t<div class='InputfieldImageEdit__buttons'><small><a href=\"\/site\/assets\/files\/11482\/tumblr_omeiihbv8g1tu3avjo1_1280.jpg\" target=\"_blank\" class=\"aos_downloadAsset\" download title=\"Download\"><i class=\"fa fa-download\"><\/i><\/a><button type='button' data-href='\/backstage\/page\/image\/edit\/?id=11482&file=11482,tumblr_omeiihbv8g1tu3avjo1_1280.jpg&rte=0&field=gallery' class='InputfieldImageButtonCrop uk-button uk-button-small uk-button-text uk-margin-small-right pw-modal-large pw-modal' data-buttons='#non_rte_dialog_buttons button' data-autoclose='1' data-close='#non_rte_cancel'><i class='fa fa-crop'><\/i> Crop<\/button><button type='button' class='InputfieldImageButtonFocus uk-button uk-button-small uk-button-text uk-margin-small-right'><i class='fa fa-circle-o' data-toggle='fa-circle-o fa-dot-circle-o'><\/i> Focus<\/button><button type='button' data-href='\/backstage\/page\/image\/variations\/?id=11482&file=tumblr_omeiihbv8g1tu3avjo1_1280.jpg&modal=1&varcnt=varcnt_gallery_repeater11482_5f68e2495aab81b39cb738510564e6dd' class='uk-button uk-button-small uk-button-text uk-margin-small-right pw-modal-large pw-modal' data-buttons='button'><i class='fa fa-files-o'><\/i> Variations <span class='ui-priority-secondary'>(0)<\/span><\/button><\/small> <select class='uk-select uk-form-small InputfieldFileActionSelect' name='act_gallery_repeater11482_5f68e2495aab81b39cb738510564e6dd'><option value=''>Actions<\/option><option value='dup'>Duplicate<\/option><option value='fv'>Flip vert<\/option><option value='fh'>Flip horiz<\/option><option value='fb'>Flip both<\/option><option value='r90'>Rotate 90&deg;<\/option><option value='r180'>Rotate 180&deg;<\/option><option value='r270'>Rotate 270&deg;<\/option><option value='r-90'>Rotate -90&deg;<\/option><option value='r-180'>Rotate -180&deg;<\/option><option value='r-270'>Rotate -270&deg;<\/option><option value='bw'>B&amp;W<\/option><option value='sep'>Sepia<\/option><\/select> <span class='InputfieldFileActionNote detail'>Action applied at save.<\/span><\/div>\n\t\t\t\t\t<div class='InputfieldImageEdit__core'><div class='hasLangTabs langTabsContainer'><div class='langTabs'><ul  uk-tab><li><a data-lang='1010' class='langTab1010' href='#langTab_gallery_repeater11482_5f68e2495aab81b39cb738510564e6dd__1010'>English<\/a><\/li><li><a data-lang='10189' class='langTab10189' href='#langTab_gallery_repeater11482_5f68e2495aab81b39cb738510564e6dd__10189'>Deutsch<\/a><\/li><\/ul><div class='InputfieldFileDescription LanguageSupport' data-language='1010' id='langTab_gallery_repeater11482_5f68e2495aab81b39cb738510564e6dd__1010'><label for='description_gallery_repeater11482_5f68e2495aab81b39cb738510564e6dd' class='detail LanguageSupportLabel'>English<\/label><input type='text' name='description_gallery_repeater11482_5f68e2495aab81b39cb738510564e6dd' id='description_gallery_repeater11482_5f68e2495aab81b39cb738510564e6dd'  value='' \/><\/div><div class='InputfieldFileDescription LanguageSupport' data-language='10189' id='langTab_gallery_repeater11482_5f68e2495aab81b39cb738510564e6dd__10189'><label for='description10189_gallery_repeater11482_5f68e2495aab81b39cb738510564e6dd' class='detail LanguageSupportLabel'>Deutsch<\/label><input type='text' name='description10189_gallery_repeater11482_5f68e2495aab81b39cb738510564e6dd' id='description10189_gallery_repeater11482_5f68e2495aab81b39cb738510564e6dd'  value='' \/><\/div><\/div><\/div><script>setupLanguageTabs($('#wrap_Inputfield_gallery_repeater11482'));<\/script><\/div>\n\t\t\t\t\t<div class='InputfieldImageEdit__additional'><\/div>\n\t\t\t\t\t<input class='InputfieldFileSort' type='text' name='sort_gallery_repeater11482_5f68e2495aab81b39cb738510564e6dd' value='0' \/>\n\t\t\t\t\t<input class='InputfieldFileReplace' type='hidden' name='replace_gallery_repeater11482_5f68e2495aab81b39cb738510564e6dd' \/>\n\t\t\t\t\t<input class='InputfieldFileRename' type='hidden' name='rename_gallery_repeater11482_5f68e2495aab81b39cb738510564e6dd' \/>\n\t\t\t\t\t<input class='InputfieldImageFocus' type='hidden' name='focus_gallery_repeater11482_5f68e2495aab81b39cb738510564e6dd' value='50 50 0' \/>\n\t\t\t\t<\/div>\n\t\t\t<\/li>","replace":false,"overwrite":0}]

This part clearly shouldn't be here: <div class='scrollTable'><table>

That was meant to be injected only in the frontend (to make big tables responsive and simply add a wrapper).

Thanks a lot @adrian for your patience. Gonna re-write that hook. At least I found the culprit now (my own stupidity)

  • Like 1

Share this post


Link to post
Share on other sites

Glad you found it, but now I want to know why all of a sudden you are getting the response back. Did you do something different to get this to show up. or are you getting it some other way?

Share this post


Link to post
Share on other sites

I was focussing on the network panel in Google Chrome, and this didn't show anything.

Now I was actually clicking (inside console) on the VM:xxx link that Chrome also provides. This actually showed me the response. Weird (but then again, I don't claim to be a JS debugger guru by any means...)

  • Like 1

Share this post


Link to post
Share on other sites
$this->addHookAfter('Page::render', function ($event) {
    if ($this->page->template != 'admin') {
        $event->return = str_replace("<iframe", "\n<div class='videoWrapper'><iframe", $event->return);
        $event->return = str_replace("</iframe>", "</iframe></div>", $event->return);
        $event->return = str_replace("<table", "\n<div class='scrollTable'><table", $event->return);
        $event->return = str_replace("</table>", "</table></div>", $event->return);
    }
});

fwiw, here's the hook how it should have been from the get-go. I omitted the page template if condition (if there's a more recommended way of doing such stuff, I'm all ears).

Share this post


Link to post
Share on other sites
8 minutes ago, dragan said:

Now I was actually clicking (inside console) on the VM:xxx link that Chrome also provides

Yes of course - sorry it didn't occur to me to mention this - it's a good reminder for everyone who may read this in the future though. Here's a screenshot to show it in action.

1) Make sure the Network tab is open before you start the image upload

2) Clear the existing entries to make the image upload script easier to find

3) Upload image

4) Select the image upload script

5) Check the Response tab - sometimes the error will be here, but if not, proceed to step 6

6) If nothing there, go to the Console tab and click on the VM: link from the error.

7) Notice that "test" is being output before the json response

zlZcm2QzpD.thumb.gif.115ea2e0ca59e1cbcaf9602f1d76b9e1.gif

  • Like 1

Share this post


Link to post
Share on other sites
8 minutes ago, dragan said:

fwiw, here's the hook how it should have been from the get-go. I omitted the page template if condition (if there's a more recommended way of doing such stuff, I'm all ears).

I think I would actually go hooking into field rendering rather than page so that you can target this to just RTE textarea fields, or whatever you are using to store this iframe stuff in the first place. Actually, on that note, I think I would go with a textformatter module to handle the iframe rather than allowing it to be entered into an RTE (assuming that is what you are actually doing - maybe you're not?).

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By rushy
      Hi. I've been using Processwire for a few years now and installed it on a few different shared hosting servers without issues, but I'm now running into an issue on a Fasthosts shared server that I've not seen before. The installation goes ok and I have a working default site profile but I am unable to complete any uploads of images. It just hangs at the progress spinner during the upload. I thought it might be a priviledge issue so have temporarily set the dir / file privs. as 777 / 666 just to test that but it made no difference. I have no errors in the wire log. In server error log I have:
      set_time_limit() has been disabled for security reasons in ....htdocs/wire/core/ImageSizerEngine.php on line 1035 and i note in the assets/file dir. where the image is being stored the date on the file being created has a year of 1970 and 0 length. If I leave the page this file disappears and nothing has been stored. 
      Does anyone know how I can enable set_time_limit if this is likely to be the problem? 
      Many thanks! Paul
    • By Fanni
      Hi all, 
      I am having some issues uploading a PDF to our website (a problem we’ve had before).
      I have tried reducing the size of the PDF but the problem seems to be with generating the thumbnail image because the upload works under the Fallback mode but the thumbnail is terrible (see attached). 
      Does anybody have any advice about this? Please note that I'm not a developer. 
      Thanks!
       


    • By Marcel
      Hey,
      I am about to use the tool Create Users Batcher. We have 450 users. When I tryed it with like 20 test users it worked but it took a while. Now my concerns are that 450 might be to stressful? Does anyone have experience with several hundreds of users? My thoughts are to split it in smaller goups and upload them one group after another.
      best wishes
      marcel
    • By Mustafa-Online
      I got a field with a type of "files" named: course_file .. how can I upload it to custom directory??
    • By rst
      I am having problems uploading svg images in the the latest pw 3.0.98. It shows the preview and has the spinner on top of it, and just gets stuck on that.
      Worked fine in the previous version of PW
×
×
  • Create New...