issues with xdomain.js?

[AdamQuadmon]

Hi guys, I'm using xdomain.js to do cors stuff.

Your script works without xdomain but using also xdomain result in a server error saying the file was not found.
(I tried loading angular-file-upload-shim.js before xdomain and after it, the issue is the same).

Both libraries hacks the XHR object. I think:

• something in xdomain is removing important stuff from the XHR object.
• or your shim is adding something to XHR that xdomain doesn't copy as well

xdomain is using xhook and uploads seems to be supported there.

( I tried also to not load the shim but it doesn't work as well)

I need some hint to debug the issue.

Thanks for this module and for you help!

[danialfarid]

angular-file-upload-shim.js does modify the XHR to enable progress event and shim for non-HTML5 browsers.
Try loading the libraries in this order xdomain.js first then angular-file-upload-shim.js, angular.js and then 'angular-file-upoad.js`

For HTML5 browsers shim replaces XMLHttpRequest just to override the setRequestHeader line 11
For non-HTML5 all the XMLHttpRequest methods are overridden to use FileAPI.

[AdamQuadmon]

thanks for the quick reply.

loading stuff in this order throw:

Cannot call method 'addEventListener' of undefined
at http://localhost:9000/bower_components/ng-file-upload/angular-file-upload.js:25:17
at Object.setRequestHeader (http://localhost:9000/bower_components/ng-file-upload/angular-file-upload-shim.js:21:43)

[danialfarid]

What browser?

[AdamQuadmon]

chrome

[danialfarid]

By the way this won't work for IE8-9 FileAPI, since it is using flash to send the request not XMLHttpRequest so the cross domain policy will not allow you to upload unless you setup crossdomain.xml file on your server.

[danialfarid]

The error means that xdomain.js modify XMLHttpRequest and removes xhr.upload which means that you won't be able to listen to progress event unless it provides another way of doing it.
So if you just want the upload to work for HTML5 browsers without progress event you don't need to load the shim. Just include angular-file-upload.js after angular.js and the upload part should work.

[AdamQuadmon]

maybe I can avoid progress but even without the shim the file is not uploaded.
I don't see anymore the addEventListener error.
In the request headers I can see the Request Payload Object.
But the server is not receiving the file.

I guess xdomain is somehow removing it but I'm not that expert of XMLHttpRequest to understand.

I'm trying to console.log stuff from xdomain looking for where it rebuild the request removing the file.
But I really don't know where to look, I just see XMLHttpRequest.upload but there is no file there...

Do you know where is the file in the XMLHttpRequest object?

[danialfarid]

Could you copy paste here the actual request being sent to the server from Chrome including headers and contents?

[danialfarid]

The file is added to the xhr using xhr.send(formData) function. The formData is the actual file content and XMLHttpRequest would normally put the content of the formData as multipart/form-data in the request content. It is possible that xdomain has not implemented that yet and just accepts json data in xhr.send().

The other approach would be to use $upload.http() method which send the actual binary of the file as data with the Content-Type equal to the file content type to the server. But then your server need to be able to handle that request and receive the content and convert it to the file: #88 (comment)

[AdamQuadmon]

Request URL:https://api.local.com/uploads/image
Request Method:POST
Status Code:400 Bad Request
Request Headers
Accept:application/json, text/plain, /
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8,it;q=0.6
Cache-Control:no-cache
Connection:keep-alive
Content-Length:15
Content-Type:text/plain;charset=UTF-8
Cookie:/.../
Host:api.local.com
Origin:https://api.local.com
Pragma:no-cache
Referer:https://api.local.com/proxy.html
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.77 Safari/537.36
Request Payload
[object Object]
Response Headers
Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:https://api.local.com
Access-Control-Expose-Headers: /.../
Cache-Control:no-cache
Connection:keep-alive
Content-Type:application/json
Date:Fri, 24 Jan 2014 17:46:54 GMT
Server:nginx/1.4.4
Transfer-Encoding:chunked
X-Debug-Token:baa855
X-Debug-Token-Link:/_profiler/baa855
X-Powered-By:PHP/5.5.7-1~dotdeb.1

[danialfarid]

and your js code that calls upload

[AdamQuadmon]

$upload.upload(
    {
        url:  uploadImage,
        file: $files[0]
    })
    .success(updateScope)
    .error(notifyError)
    .progress(updateProgress);

[danialfarid]

Try to include shim after xdomain again and comment out lines 21 to 42 of angular-file-upload.js. See if anything changes.

[AdamQuadmon]

there is no addEventListener error but still no file received from the server

[danialfarid]

Then xdomain changes the way send() and addRequestHeader functions work. I think you better open an issue on their github.
Basically even with just angular if you send a $http.post() with data of type FormData it wouldn't work with xdomain.

[priyanganamal]

Thanks for trying out this issue. As this seems not resolved I had to move on https://github.com/nervgh/angular-file-upload.
It's working like a charm.