I am using JQuery to upload files to a server, and it's working fine. Since some users will be uploading large files, I want to add a progress bar, and this is where things get funky. I've found about 10 different solutions ( including on here ) but none of them work in my scenario.
I am posting to a different origin (and that's a fact I can't change). This works:
$.ajax({
url: "xxx",
type: 'POST',
data: data,
cache: false,
dataType: 'json',
processData: false, // Don't process the files
contentType: false, // Set content type to false as jQuery will tell the server its a query string request
success: function(data, textStatus, jqXHR)
{
if(typeof data.error === 'undefined')
{
console.log('Success');
}
else
{
console.log('ERRORS: ' + data.error);
}
},
error: function(jqXHR, textStatus, errorThrown)
{
console.log('ERRORS: ' + textStatus);
}
});
But as soon as I touch the XHR object, such as here to add an onprogress listener:
Can onprogress functionality be added to jQuery.ajax() by using xhrFields?
And my code becomes:
$.ajax({
url: "xxx",
type: 'POST',
data: data,
cache: false,
dataType: 'json',
processData: false, // Don't process the files
contentType: false, // Set content type to false as jQuery will tell the server its a query string request
xhr: function()
{
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
}
}, false);
return xhr;
},
success: function(data, textStatus, jqXHR)
{
if(typeof data.error === 'undefined')
{
console.log('Success');
}
else
{
console.log('ERRORS: ' + data.error);
}
},
error: function(jqXHR, textStatus, errorThrown)
{
console.log('ERRORS: ' + textStatus);
}
});
I get the following error in the browser:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at xxx. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
Using Firefox to test, but changing isn't really an option, this needs to work on most popular browsers.
So basically, I can post cross-origin and it works. As soon as I want to monitor its progress it fails.
Other ways I've tried:
- Adding onprogress: to $.ajax()
- Using XHRFields
- Various different forms of xhr: function ()
As soon as I touch the XHR object, I get denied by CORS. Just in case you're wondering, the web-server (Apache) is set up like this:
Header set Access-Control-Allow-Origin "*"
Appreciate any input, I've been at this for hours now and can't get the bloody progress to show. Spent more time on that than on the actual application itself.
This is JQuery 1.7.1 - and I can't upgrade it.
Does anyone have any ideas why the different origin would not be allowed if I modify the xhr object?
Cheers
Stefan
