Tm1-ui-upload libs.3.0.1.js:9576 DOMException: Failed to execute 'setRequestHeader' on 'XMLHttpRequest'

tyler_salminen · July 31, 2018, 3:00pm

I have been having the following error when uploading images through the tm1-ui-upload directive for about half a year now. I was hoping the 3.* would fix the error but it did not. Image uploads are never successful. Even with a blank empty page. Not sure if there is something wrong with our installation of canvas or what because it seems others on the forum are not having this issue that I know of.

Directive Instantiation (nothing out of the ordinary):

The error:

plim · July 31, 2018, 10:48pm

Hi Tyler,

How about the Canvas Window Service? Is it running under a service account? If so, does it have a Read and Write access privilege into that ‘files’ directory?

The other area that could give a hint as to what is going on is the Network tab of Chrome and check what is the response.

Can you help verify the above? Thanks!

–
Paul

tyler_salminen · August 1, 2018, 1:09pm

Hi Paul,

The server is running under an account with file privileges. As for the network response, it returns with a 200 status. There is no response. No file is actually uploaded to the server and the error message I posted earlier is generated. It is throwing an error when trying to set a request header to an XML HTTP request, which sounds like it is erroring before sending out any subsequent requests that my happen after the save ?

plim · August 2, 2018, 12:59am

Hi @tyler_salminen,

This is something similar to the issue that you are currently facing:

github.com/danialfarid/ng-file-upload

angular-file-upload-shim does not work correctly on Chrome - Failed to execute 'setRequestHeader' on 'XMLHttpRequest'

opened 05:48PM - 24 Feb 15 UTC

closed 09:23PM - 13 Apr 15 UTC

nicops

When I try to upload a file, I get this error: ``` Error: Failed to execute 'se…tRequestHeader' on 'XMLHttpRequest': 'function (xhr) { if (!xhr) return; config.__XHR = xhr; config.xhrFn && config.xhrFn(xhr); xhr.upload.addEventListener('progress', function(e) { e.config = config; deferred.notify ? deferred.notify(e) : promise.progress_fn && $timeout(function(){promise.progress_fn(e)}); }, false); //fix for firefox not firing upload progress end, also IE8-9 xhr.upload.addEventListener('load', function(e) { if (e.lengthComputable) { e.config = config; deferred.notify ? deferred.notify(e) : promise.progress_fn && $timeout(function(){promise.progress_fn(e)}); } }, false); }' is not a valid HTTP header field value. ``` What I figured out is that `$upload` sets a fake header called `__setXHR_` and `angular-file-upload-shim` patches some methods to manage the fake header here: ``` patchXHR('setRequestHeader', function(orig) { return function(header, value) { if (header === '__setXHR_') { initializeUploadListener(this); var val = value(this); // fix for angular < 1.2.0 if (val instanceof Function) { val(this); } } else { this.__requestHeaders = this.__requestHeaders || {}; this.__requestHeaders[header] = value; orig.apply(this, arguments); } } }); ``` The problem is that `angular-file-upload-shim` conditionally executes most of its code: ``` if ((window.XMLHttpRequest && !window.FormData) || (window.FileAPI && FileAPI.forceLoad)) ``` And at least in my browser (Chrome 40.0.2214.93 for Linux), window.FormData is set, and window.FileAPI is not, so the condition isn't met. In summary: - The fake header is set - The patched XHR function that would process the fake header is not set. - The core javascript libraries cannot process the fake header and everything stops working Versions: - angular 1.3.12 - ng-file-upload 3.0.7

And from the discussions on the board, it seems like it is due to some library being used which is interrupting with the underlying upload library (the same ng-file-upload in the above post) that Canvas is using.

As for the upload process, Canvas actually does it in 2 requests. The first one is to set the parameters, as what you have posted above. And this first request is correct that it does not return anything. Once this setting has been done and it is successful, it will trigger the actual upload of the file on a second request.

So a number of things we can check out here:

Can you help verify whether you are able to upload via the Canvas /samples application
Do you have other 3rd party JS libraries/shims? If so, try to remove 3rd party libraries to isolate which one is causing the upload issue - and once you have found that library, try to move it around the declaration to see where it can potentially help resolve this.

Let us know how it goes.

–
Paul