title: Upload image to server with ionic/angularjs
body: <p>I want upload image to server with ionic. 
  I use this factory:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function () {
      function ius($q, $ionicLoading, $cordovaFile ) {  
          var service = {};
          service.uploadImage = uploadImage;
          return service;
          function uploadImage(imageURI) {
              var deferred = $q.defer();
              var fileSize;
              var percentage;
              // Find out how big the original file is
              window.resolveLocalFileSystemURL(imageURI, function (fileEntry) {
                  fileEntry.file(function (fileObj) {
                      fileSize = fileObj.size;
                      // Display a loading indicator reporting the start of the upload
                      $ionicLoading.show({ template: 'Uploading Picture : ' + 0 + '%' });
                      // Trigger the upload
                      uploadFile();
                  });
              });
              function uploadFile() {
                  // Add the Cloudinary "upload preset" name to the headers
                  var uploadOptions = {
                      params: { 'upload_preset': CLOUDINARY_CONFIGS.UPLOAD_PRESET }  //CLOUDINARY_CONFIGS.UPLOAD_PRESET
                  };
                  $cordovaFile
                    // Your Cloudinary URL will go here
                    .uploadFile(CLOUDINARY_CONFIGS.API_URL, imageURI, uploadOptions)  //
  
                    .then(function (result) {
                        // Let the user know the upload is completed
                        $ionicLoading.show({ template: 'Upload Completed', duration: 1000 });
                        // Result has a "response" property that is escaped
                        // FYI: The result will also have URLs for any new images generated with 
                        // eager transformations
                        var response = JSON.parse(decodeURIComponent(result.response));
                        deferred.resolve(response);
                    }, function (err) {
                        // Uh oh!
                        $ionicLoading.show({ template: 'Upload Failed', duration: 3000 });
                        deferred.reject(err);
                    }, function (progress) {
                        // The upload plugin gives you information about how much data has been transferred 
                        // on some interval.  Use this with the original file size to show a progress indicator.
                        percentage = Math.floor(progress.loaded / fileSize * 100);
                        $ionicLoading.show({ template: 'Uploading Picture : ' + percentage + '%' });
                    });
              }
              return deferred.promise;
          }
      }
      angular.module('App').factory('ImageUploadService', ius);
  })();</code></pre>
  </div>
  </div>
  </p>
  
  <p>And i call this function : </p>
  
  <pre><code>'Use Strict';
  angular.module('App').controller('editeventController', function ($scope,ImageUploadService) {
  
  
      $scope.upload = function () {
  
          ImageUploadService.uploadImage("img/test.jpg").then(  
          function (result) {
  
              var url = result.secure_url || '';
              var urlSmall;
  
              if (result &amp;&amp; result.eager[0]) urlSmall = result.eager[0].secure_url || '';
  
              // Do something with the results here.
  
              $cordovaCamera.cleanup();
  
          },
          function (err) {
  
              // Do something with the error here
              $cordovaCamera.cleanup();
  
          });
  
      }
  </code></pre>
  
  <p>But, when I try to upload, I have this error: </p>
  
  <blockquote>
    <p>TypeError: window.resolveLocalFileSystemURL is not a function
        at Object.uploadImage (<a href="http://localhost:8100/js/services/utils.js:177:20" rel="nofollow">http://localhost:8100/js/services/utils.js:177:20</a>)
        at Scope.$scope.upload (<a href="http://localhost:8100/views/editevent/editevent.js:199:28" rel="nofollow">http://localhost:8100/views/editevent/editevent.js:199:28</a>)
        at fn (eval at  (<a href="http://localhost:8100/lib/ionic/js/ionic.bundle.js:26457:15" rel="nofollow">http://localhost:8100/lib/ionic/js/ionic.bundle.js:26457:15</a>),
    :4:209)
        at <a href="http://localhost:8100/lib/ionic/js/ionic.bundle.js:62386:9" rel="nofollow">http://localhost:8100/lib/ionic/js/ionic.bundle.js:62386:9</a>
        at Scope.$eval (<a href="http://localhost:8100/lib/ionic/js/ionic.bundle.js:29158:28" rel="nofollow">http://localhost:8100/lib/ionic/js/ionic.bundle.js:29158:28</a>)
        at Scope.$apply (<a href="http://localhost:8100/lib/ionic/js/ionic.bundle.js:29257:23" rel="nofollow">http://localhost:8100/lib/ionic/js/ionic.bundle.js:29257:23</a>)
        at HTMLButtonElement. (<a href="http://localhost:8100/lib/ionic/js/ionic.bundle.js:62385:13" rel="nofollow">http://localhost:8100/lib/ionic/js/ionic.bundle.js:62385:13</a>)
        at HTMLButtonElement.eventHandler (<a href="http://localhost:8100/lib/ionic/js/ionic.bundle.js:16583:21" rel="nofollow">http://localhost:8100/lib/ionic/js/ionic.bundle.js:16583:21</a>)
        at triggerMouseEvent (<a href="http://localhost:8100/lib/ionic/js/ionic.bundle.js:2948:7" rel="nofollow">http://localhost:8100/lib/ionic/js/ionic.bundle.js:2948:7</a>)
        at tapClick (<a href="http://localhost:8100/lib/ionic/js/ionic.bundle.js:2937:3" rel="nofollow">http://localhost:8100/lib/ionic/js/ionic.bundle.js:2937:3</a>)</p>
  </blockquote>
  
  <p>[edit]</p>
  
  <p>I use requestFileSystem instead of resolveLocalFileSystemURL</p>
  
  <pre><code>  window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
  
              window.requestFileSystem(window.PERSISTENT, 0, onSuccess, onError);
  
              function onSuccess(fileSystem) {
                  var directoryEntry = fileSystem.root;
                  console.log(directoryEntry);
                  directoryEntry.getFile(imageURI, { create: true, exclusive: false }, function (fileEntry) {
  
                      console.log(fileEntry);
                      fileEntry.createWriter(function (writer) {
                        //  writer.write("This is the text inside readme file");
  
                          var pathOfFile = fileEntry.fullPath;
                          console.log(pathOfFile);
                          fileSize = fileEntry.size;
                          // Display a loading indicator reporting the start of the upload
                          $ionicLoading.show({ template: 'Uploading Picture : ' + 0 + '%' });
                          uploadFile();
  
                      }, function (error) {
                          alert("Error occurred while writing to file. Error is: " + error.message);
                      });
                  }, function (error) {
                      console.log(error.message);
                      alert("Error occurred while getting a pointer to file. Error is: " + error.message);
                  });
              }
  
              function onError(evt) {
                  alert("Error occurred during request to file system pointer. Error is: " + evt.message);
              }
  </code></pre>
  
  <p>Now I have this error:</p>
  
  <blockquote>
    <p>The operation failed because it would cause the application to exceed
    its storage quota.</p>
  </blockquote>