form data upload progress using xhr javascript - angularjs

Question

I have written a service, which allows me to upload a given file along with a json object to a given url. My code is:
(function() {
angular.module('petrofacApp')
.service("fileUpload", fileUpload);
function fileUpload() {
function uploadFileToUrl(file, uploadUrl, jsonRequest, callback){
var fd = new FormData();
fd.append('JsonRequestData', JSON.stringify(jsonRequest));
fd.append('file', file, file.name);
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded / e.total) * 100;
console.log(percentComplete);
}
};
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
callback(xhr.response);
}
};
xhr.open('POST', uploadUrl, true);
xhr.send(fd);
}
return {
uploadFileToUrl: uploadFileToUrl
}
}
}());
My problem is- if I mention the onprogress event as
xhr.onprogress = function(e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded / e.total) * 100;
console.log(percentComplete);
}
};
file gets uploaded without any problem, but onprogress event gets triggered only once, when the upload is finished.
I found out that, to avoid this problem I have to use upload.onprogress. So I changed my code to
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded / e.total) * 100;
console.log(percentComplete);
}
};
When I execute this, I get error-
XMLHttpRequest cannot load http://192.168.xxx.xxx:6152/api/UploadFile. Response for preflight has invalid HTTP status code 405.
Please help me in solving this issue.

Answer 1

The problem was related to CORS. I got it fixed from the server side by installing "CORS" from Nuget and then adding the following code to WebApi.config file
var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);
This solved my problem.