InputfieldFile.js and InputfieldImage.js missing xhr.getAllResponseHeaders();

[adrianbj]

Short description of the issue

Both these files use vanilla JS ajax requests, and even though they send:

xhr.setRequestHeader("X-REQUESTED-WITH", 'XMLHttpRequest');

they don't make use of:

xhr.getAllResponseHeaders();

This isn't an issue for the PW core, but it's a problem for the TracyDebugger module. Without the xhr.getAllResponseHeaders();, it can't update its AJAX debug bar. This is a particular problem when debugging image/file uploads because Tracy still manages to intercept any returned notices/warnings, but it can't display them which makes it look like everything is working successfully while Tracy is running. As soon as Tracy isn't running, the notice/warning gets through with the json response and breaks the upload.

Optional: Suggestion for a possible fix

It's a very easy fix. Simply add:

xhr.getAllResponseHeaders();

after this line: https://github.com/processwire/processwire/blob/e12095e622555fe79cd792dea1ed7d671e37d9d4/wire/modules/Inputfield/InputfieldFile/InputfieldFile.js#L254

and also after this line:
https://github.com/processwire/processwire/blob/e12095e622555fe79cd792dea1ed7d671e37d9d4/wire/modules/Inputfield/InputfieldImage/InputfieldImage.js#L1402

I have tested these additions and they work perfectly.

If you want to do some more reading on the issue:
nette/tracy#233

https://processwire.com/talk/topic/4865-custom-upload-names/?do=findComment&comment=130578

It would be extremely helpful is these could be added - I think a lot of PW users have Tracy installed and this can make debugging image/file uploads problematic.

Just a final FYI - the rest of the PW core uses jquery for AJAX uploads which makes use of xhr.getAllResponseHeaders(); already, so these files are the only places this should be needed.

Thanks for considering!

[adrianbj]

PS - this is what happens with the AJAX bar in Tracy when those xhr.getAllResponseHeaders(); calls are added:

I think this will be of great benefit to beginners debugging image/file upload problems who aren't used to looking for AJAX errors in the Network panel of the browser dev console because now any notices/errors will appear very obviously on the Tracy AJAX debug bar.

[teppokoivula]

This is probably a dumb question, but according to docs XMLHttpRequest.getAllResponseHeaders() returns response headers but doesn't actually do anything with them. Seems to me that adding this line alone would be equal to, say, calling getallheaders() in a PHP file without actually storing, outputting, or otherwise using the return value.

What am I missing here? :)

[adrianbj]

Hi @teppokoivula - I agree it seems a little weird. I was clued into it by this post: https://forum.nette.org/en/26726-vanilla-js-ajax-post-not-triggering-tracy-bar#p176954 - thanks to @rolandtoth for initiating that conversation.

The other key thing is that this is exactly what jQuery does when receiving an AJAX response: https://github.com/jquery/jquery/blob/2d4f53416e5f74fa98e0c1d66b6f3c285a12f0ce/src/ajax/xhr.js#L109

The main though is that it works :) and I think will be a huge advantage helping beginners debug image uploads when they stall due to a warning/notice in the AJAX response.

[ryancramerdesign]

No problem, I've gone ahead and added this in the latest commit.

[adrianbj]

Awesome - thanks @ryancramerdesign