Crossdomain issue in IE 8 when uploading

[svuppala]

Hi,
angular-file-upload in IE 8 browser is throwing up crossdomain.xml issue(404-Not found) and not sure how to resolve this.
Is Angular-file-upload compatible with IE 8??

[danialfarid]

Yes it is. I need more details to know what issue you have

[svuppala]

Thanks,

I have tested below my file-upload code in chrome and works fine without any crossdomain issue.When testing in IE 8 using angular-file-upload-shim and flash files ,i get 404 not found error "http://166:114:163:45:8080/crossdomain.xml".

I have installed ng-file-upload using bower and versions i am using are:
Angularjs:1.2.14,
ng-file-upload:1.6.5
flash files are together in the ng-file-upload directory.

var fileUploadUrl=http://166:114:163:45:8080/fileUpload/source;
$scope.upload = $upload.upload({
url: fileUploadUrl,
method: 'POST',
headers: {'sessionId': $rootScope.currentUser.sessionId},
file: $scope.selectedFiles[0],
fileFormDataName: 'uploadedFile'
}).progress(function(evt) {
console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
}).success(function(data, status, headers, config) {
// file is uploaded successfully
console.log(data);
}).error(function (data, status, headers, config) {
// file failed to upload
console.log(data);
});

document say to place crossdomain.xml file on server if you are using CDN but i am not using CDN??then why should i need to place this file on server??

I have placed the crossdomain.xml file on my tomcat webapps/ROOT folder and i don't get any 404 error but instead i get 401 Unauthorized error.

crossdomain.xml file:

I could not identify whats wrong?Any help is appreciated.

[danialfarid]

You gotta have the crossdomain.xml on your server if you are using CORS too. I am gonna update the docs.

[svuppala]

Thanks,
I have placed the crossdomain.xml file on my tomcat webapps/ROOT folder and i don't get any 404 error but instead i get 401 Unauthorized error.

crossdomain.xml file:

cross-domain-policy
site-control permitted-cross-domain-policies="all"
allow-access-from domain="" secure="false"
allow-http-request-headers-from domain="" headers="*" secure="false"
/cross-domain-policy

[danialfarid]

can you try this one:

<cross-domain-policy>
<site-control permitted-cross-domain-policies="all"/>
<allow-access-from domain="*" secure="false"/>
<allow-access-from domain="166:114:163:45:8080"/>
<allow-http-request-headers-from domain="*" headers="*" secure="false"/>
</cross-domain-policy>

[svuppala]

I have tried but no luck.....still getting 401 Unauthorized error.

[danialfarid]

Make sure you put the crossdomain.xml on the uploading server so that
http://166:114:163:45:8080/crossdomain.xml should be accessible.
Does the upload request gets to the server at all?

[svuppala]

I could access my crossdomain.xml from the browser and given read write to crossdomain.xml file on server.
Yes,upload request gets to server as i could see in my server logs as
10.130.2.20 - - [26/Aug/2014:13:07:59 +1000] "POST /fileUpload/source HTTP/1.1" 401 45

[danialfarid]

Well if it gets to the server then that is the server which is returning 401 for some reason. So the plugin is working and you need to figure out the server part.

[danialfarid]

Note that Flash doesn't support custom headers so if your sever relies on some auth headers for authentication you need to find workaround. There are couple issues with suggested workaround if you search.

[svuppala]

we use custom header called sessionId as you could see in the second post with CORS.Can you suggest any workaround for flash to support custom headers???or workaround to fix these custom headers??

headers: {'sessionId': $rootScope.currentUser.sessionId},

[danialfarid]

https://github.com/danialfarid/angular-file-upload#old_browsers

[svuppala]

I am planning to pass my customer header 'sessionId' as query parameters....can we do this and make the plugin work in IE 8?if so where do i mention my query parameter in $upload.upload ?should query parameter should be part of url or is there any option that i can use to pass query parameter??

[danialfarid]

You can pass it either as part of the url or as data: {sessionId: 'xxx'}. If you use the first approach you can get that on the server from the get request parameters and for the second one from the request body content form data. So the first approach would be easier.

[svuppala]

I have passed in the sessionId as query parameter and now i get 403 error where as it doesn't happen in chrome.I am trying to see what wrong on my server but mean while i noticed 403 error response is undefined which i have raised as a new ticket #310.I have noticed similar issue has been raised in ticket #182 and i am not sure if ticket #182 has been resolved or any workaround do you have?

i got currently 2 issue at my end to go ahead with this plugin in IE 8.
1)403 error----debugging at my end to see whats causing this error.
2)403 error response is undefined.Ticket #310-----is this a limitation of flash ??

[danialfarid]

First you gotta find out if the request gets to the server at all by putting some logging or debugging on the server.
If the request gets to the server then the 403 is not related to the plugin or CORS and then if you have any authentication for the requests using auth headers you need a workaround for the server side to use the query parameters instead of request headers. So you need special handling and server code for this case.

[svuppala]

We have placed special check on our server to handle query parameters and now it's working fine but why is 403 error response is undefined in IE 8?how can we resolve this issue??

[svuppala]

Hi Danial,

Tool is great but with few limitations on old browsers because of flash.
There are 2 outstanding issues in IE 8 browser
1.Error responses are undefined in IE 8
2.recently i have noticed that pageTitle is changing in my yeoman angularjs app with requirejs in IE 8 (using shim) but not in chrome.

Any suggestion for workarounds will be appreciated.

[danialfarid]

I will investigate those when I get time. If you wanna debug yourself use the non minified version of files and put a break point here https://github.com/danialfarid/angular-file-upload/blob/master/dist/angular-file-upload-shim.js#L108
for IE8 check the err object and xhr.response and xhr.responseText if they are empty it means that Flash or FileAPI are not returning the correct error response.

You can also try using version 1.3.x of the plugin which is using an older version of FileAPI and see if that makes any different in returning response error code.

[danialfarid]

Yep that's a flash limitation no response body in case of error just the error code.