How can I upload a photo to azure blob storage?

ionic-v1
1

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 (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;
};

var reader = new FileReader();
//$scope.blobSasUrl is url to upload to azure blob storage
reader.onloadend = function (evt) {
$(’#fileContents’).html(e.target.result);
reader.readAsDataURL(file);

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

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

};

and so on…

2

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: