how to upload a photo to azure blob storage using cordova api?

Question

I am trying to upload a photo from mobile device to azure blob storage using Cordova api. I just can't seem to get it to work. Any idea will help out greatly.

Data uploaded to blob looks like this.

start ---->

--+++++org.apache.cordova.formBoundary

Content-Disposition: form-data; name="file"; filename="test"

Content-Type: image/jpeg

Content-Length: 46785

���� ....

<--- end

---

My code:

/*Cordova Camera API calls*/
$scope.takePic = function (type) {

    if (navigator.camera != undefined) {
        if (type == 'PHOTOLIBRARY')
            type = Camera.PictureSourceType.PHOTOLIBRARY;
        else if (type == 'CAMERA')
            type = Camera.PictureSourceType.CAMERA;

        var options = {
            quality: 45,
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: type,
            allowEdit: true,
            encodingType: Camera.EncodingType.JPEG,
            saveToPhotoAlbum: false
        }
        navigator.camera.getPicture(onSuccess, onFail, options); 
    }
}

$scope.message = "Add an image";
var onSuccess = function (DATA_URL) {
    $scope.message = "Choose another image"; 
    $scope.postForm.onFileSelect = DATA_URL;
    $scope.$apply();
};
var onFail = function (e) {
    $scope.picData = null; 
    $scope.message = "On fail " + e;
};

//$scope.blobSasUrl is url to upload to azure blob storage
var xhr = new XMLHttpRequest();
xhr.onerror = fail;
xhr.onloadend = uploadCompleted;
xhr.open("PUT", $scope.blobSasUrl);
xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
xhr.setRequestHeader('x-ms-blob-content-type', 'image/jpeg');
xhr.send($scope.postForm.onFileSelect);

Edit----- //I am using Camera.DestinationType.DATA_URI. I also tried FILE_URI.

//This is not working (error)
var reader = new FileReader();
reader.onloadend = function(evt) {
    console.log(evt.target.result);  //nothing happens here
}
reader.readAsDataURL(file);  //file is either DATA_URI or FILE_URI

Answer 1

Create a blob storage service on your azure account, import the blob storage library into your website. Have the image send to your website hosted on Azure, then spin off a task to send it to your blob storage. The fact that you're using Cordova as a client is irrelevant. The server should not know who the platform client is, just how to handle the request.