How can I upload a photo to azure blob storage?


I am trying to upload a photo from mobile device to azure blob storage. I just can’t seem to get it to work.

window.resolveLocalFileSystemURL(file, function (fileEntry) //doesn’t work

var reader = new FileReader(); //this doesn’t work either
reader.onloadend = readCompleted; //onloadend doesn’t seem to get called either.

I’ve been fighting with this for last 4 days. I don’t know if this is Cordova issue or Ionic or me.

Ionic Version is 1.6.1
cordova version is 5.1.1

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

if ( != 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
    }, onFail, options); 


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

var reader = new FileReader();
//$scope.blobSasUrl is url to upload to azure blob storage
reader.onloadend = function (evt) {

fileReader.onload = function (e) { 
	file =;
	//navigator.notification.alert(file, null, 'file2');
	var ajaxRequest = new XMLHttpRequest();

	try {
		// Performing an PutBlob (BlockBlob) against storage'PUT', blobSasUrl, true);
		ajaxRequest.setRequestHeader('Content-Type', 'image/jpeg');
		ajaxRequest.setRequestHeader('x-ms-blob-type', 'BlockBlob');
		navigator.notification.alert('uploaded', null, 'requestData');
	catch (e) {
		console.warn("can't upload the image to server.\n" + e.toString());


and so on…


Have you managed to do this? I’m stuck on this right now and i can’t seem to find a good tutorial or way to do so :frowning: