How to upload a photo to azure blob using cordova api?

Question

I am trying to upload a photo from a mobile device to azure blob using Cordova api. I just can't get it to work. Any idea would help a lot.

The data loaded into blob is as follows.

start ---->

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

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

Content-Type: image / jpeg

Content-Length: 46785

...

<--- end

---

My code is:

/*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

I got this to convert it to a base64 string. You can do this with javascript.

Answer 2

Create a blob storage service on your azure account, import the blob memory library into your website. Submit the image to your website hosted on Azure, then release the task to submit it to the repository. The fact that you use Cordoba as a client does not matter. The server does not need to know who the platform client is, how to process the request.