Uploading to Azure blob storage Cordova Camera

Question

Within my Ionic app i use Cordova Camera API, when i use that it returns a string that looks like this blob:http%3A//localhost%3A4400/20e71cfe-267e-46fe-8bd6-44967b8ed433 - from that string i create a blob object and upload it to azure - problem is that a blob is not right format for my image... it works to upload but it doesn't recognize this as a image.

I think i need to create a file object and append this to FormData - but im not sure how to do that - without var the_file = new Blob([imageURI], { type: 'image/jpeg' }); i cannot create this FormData object that my API need to accept my image. I also tried to create new File but that doesnt work either.

I tried with a regular and with that i could upload to azure so i know my API is working...but i need to use Cordova because this is a Ionic app..

My code below Controller: $scope.getPhoto = function () {

        Camera.getPicture({
            quality: 75,
            targetWidth: 320,
            targetHeight: 320,
            sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY,
            destinationType: navigator.camera.DestinationType.FILE_URI,
            saveToPhotoAlbum: false
        }).then(function (imageURI) {

            var the_file = new Blob([imageURI], { type: 'image/jpeg' });

            $scope.srcImage = imageURI;
            $scope.upload(the_file);
        }, function (err) {
            console.err(err);
        });



    };

$scope.upload = function (file) {
            alert(file);
            BubbleFactory.UploadImage($scope.bubbleId, file).then(function (resp) {
                console.log(resp + $scope.bubbleId);
                $scope.post.Text = resp;
                $scope.PostMessage($scope.post);
                //console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
            }, function (resp) {
                console.log('Error status: ' + resp.status);
            }, function (evt) {
            });
        };

And in my factory i got this method to upload to Azure

  function postMultipartFormData(uri, file) {
            console.debug('Posting multiplart to : ' + uri + ' data:' + file);
            var fd = new FormData();
            fd.append('file', file);
            //console.log(fd);
            var deferred = $q.defer();
            $http.post(baseUrl + uri, fd, {
                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;
        }

My request payload when it works look like this:

------WebKitFormBoundary0iJ9DFEpiBo5QCmw
Content-Disposition: form-data; name="file"; filename="photo (3).jpg"
Content-Type: image/jpeg


------WebKitFormBoundary0iJ9DFEpiBo5QCmw--

And when its not it look like this

------WebKitFormBoundaryR4YDBKOi7RZ701i5
Content-Disposition: form-data; name="file"; filename="blob"
Content-Type: image/jpeg


------WebKitFormBoundaryR4YDBKOi7RZ701i5--

The blob object is also always 67 bytes on Azure storage

Im rather new to Ionic and Cordova apps - i tried to search for answers but i really dont understand how i can upload a simple image in right format to Azure...

Answer 1

Changed so that i used $cordovaFileTransfer.upload instead of regular upload and that worked out fine!

    function postMultipartFormData(apiUrl, imageUrl, options) {
    console.debug('Posting multiplart to : ' + apiUrl + ' data:' + options);

    var deferred = $q.defer();

    $cordovaFileTransfer.upload(apiUrl, imageUrl, {})
      .then(function(result) {
        // Success!
        deferred.resolve(result);
      }, function(err) {
        // Error
      }, function (progress) {
        // constant progress updates
    });

    return deferred.promise;
}

controller

$cordovaCamera.getPicture(camOptions).then(function (imageUrl) {
            console.log(imageUrl);
            /* iOS saves image files taken from the camera to a temporary location which can be deleted by the ios later. imageUrl points to that temporary location. We should move the image file from this temporary location to a permanent location within the app on the device. This can be done using cordova file api (File plugin). However, this task is out of the scope of this demo.      
            */

            //Display the image on screen
            $scope.srcImage = imageUrl;

            var options = {};

            $scope.upload(imageUrl, options);
        }, function (err) {
            // error
            console.warn(err);

        });

    $scope.upload = function (imageUrl, options) {
    alert(options);
    $ionicLoading.show({
           template: '<ion-spinner class="spinner-energized"></ion-spinner><br/>Uploading ...',
           duration: 20000 //Dismiss after 20 seconds
    });

    BubbleService.UploadImage(imageUrl, options).then(function (resp) {
        $ionicLoading.hide();
        console.log(resp);
    }, function (resp) {
        $ionicLoading.hide();
        console.log('Error status: ' + resp.status);
    }, function (evt) {

    });
};