Post Image (canvas) to the server in angularjs

Question

I am trying to post canvas to the server.

First I am converting the canvas to the form data which I found here:

Service:

appRoot.service('FormService', function () {
    return {
        dataURItoBlob: function (dataURI) {
            // convert base64/URLEncoded data component to raw binary data held in a string
            var byteString;
            if (dataURI.split(',')[0].indexOf('base64') >= 0)
                byteString = atob(dataURI.split(',')[1]);
            else
                byteString = unescape(dataURI.split(',')[1]);

            // separate out the mime component
            var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

            // write the bytes of the string to a typed array
            var ia = new Uint8Array(byteString.length);
            for (var i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
            }

            return new Blob([ia], { type: mimeString });
        }
    };
});


var dataURL = myCanvas.toDataURL('image/jpeg', 0.5);
var blob = FormService.dataURItoBlob(dataURL);

Then I am trying to post using angularjs which I found here :

                var fd = new FormData();
                fd.append("canvasImage", blob);
                var uploadURL = "/Quiz/ImageToPDF";

                FileUploadResource.save(uploadURL, fd).then(function (response) {

                });

Factory:

appRoot.factory('FileUploadResource', function ($http, $q, $timeout) {
    return {
        response: {},
        save: function (uploadUrl, fileData) {
            var file = fileData;
            var deferred = $q.defer();
                $http.post(uploadUrl, file, {
                    withCredentials: true,
                    headers: { 'Content-Type': undefined },
                    transformRequest: angular.identity
                }).
                    success(function (data, status, headers, config) {
                        deferred.resolve(data);
                    }).
                    error(function (data, status, headers, config) {
                    });
            return deferred.promise;
        }
    }
});

C# Controller Action:

[HttpPost, ActionName("ImageToPDF")]
public string ImageUploader(HttpPostedFileBase file)
{
  //file is null
 ...
}

Following are the values of variables in console:

DataURI:

blob:

fd:

But I am getting null file on my server. What I am missing?