title: how to upload a photo to azure blob storage using cordova api?
body: <p>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.  </p>
  
  <p>Data uploaded to blob looks like this.</p>
  
  <blockquote>
    <p>start ----></p>
    
    <p>--+++++org.apache.cordova.formBoundary</p>
    
    <p>Content-Disposition: form-data; name="file"; filename="test"</p>
    
    <p>Content-Type: image/jpeg</p>
    
    <p>Content-Length: 46785</p>
    
    <p>���� ....</p>
    
    <p>&lt;--- end</p>
  </blockquote>
  
  <hr>
  
  <p>My code:</p>
  
  <pre><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);
  </code></pre>
  
  <p>Edit-----
      //I am using Camera.DestinationType.DATA_URI.  I also tried FILE_URI.</p>
  
  <pre><code>//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
  </code></pre>