Image upload broken

[dragan]

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/?&id=11203&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

[adrian]

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

Does this help: 

 

[dragan]

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

[adrian]

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.

 

[dragan]

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

[adrian]

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?

[dragan]

Nope, nada.

[dragan]

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 September 3, 2018 by dragan
added note about ad-blocker

[adrian]

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? 

[dragan]

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)

[adrian]

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?

[dragan]

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

[dragan]

$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).

[adrian]

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

[adrian]

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?).