title: Ionic 3 Post Camera Image to API With cordova-plugin-file
body: <p>I have been successfully using cordova-plugin-file-transfer to post an image file from a device camera to an API e.g. fileTransfer.upload(fileUrl, url, options).</p>
  
  <p>However, cordova-plugin-file-transfer has now been deprecated:
  "With the new features introduced in XMLHttpRequest, this plugin is not needed any more. Migrating from this plugin to using the new features of XMLHttpRequest, is explained in this Cordova blog post."
  <a href="https://github.com/apache/cordova-plugin-file-transfer" rel="nofollow noreferrer">https://github.com/apache/cordova-plugin-file-transfer</a></p>
  
  <p>The suggested new approach is to use cordova-plugin-file and XMLHttpRequest. 
  <a href="https://cordova.apache.org/blog/2017/10/18/from-filetransfer-to-xhr2.html" rel="nofollow noreferrer">https://cordova.apache.org/blog/2017/10/18/from-filetransfer-to-xhr2.html</a></p>
  
  <pre><code>window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
      console.log('file system open: ' + fs.name);
      fs.root.getFile('bot.png', { create: true, exclusive: false }, function (fileEntry) {
          fileEntry.file(function (file) {
              var reader = new FileReader();
              reader.onloadend = function() {
                  // Create a blob based on the FileReader "result", which we asked to be retrieved as an ArrayBuffer
                  var blob = new Blob([new Uint8Array(this.result)], { type: "image/png" });
                  var oReq = new XMLHttpRequest();
                  oReq.open("POST", "http://mysweeturl.com/upload_handler", true);
                  oReq.onload = function (oEvent) {
                      // all done!
                  };
                  // Pass the blob in to XHR's send method
                  oReq.send(blob);
              };
              // Read the file as an ArrayBuffer
              reader.readAsArrayBuffer(file);
          }, function (err) { console.error('error getting fileentry file!' + err); });
      }, function (err) { console.error('error getting file! ' + err); });
  }, function (err) { console.error('error getting persistent fs! ' + err); });
  </code></pre>
  
  <p>In the example above, we can replace XMLHttpRequest with Angular 5 HttpClient e.g. </p>
  
  <pre><code>this.http.post(path, body, options);
  </code></pre>
  
  <p>The cordova-plugin-camera docs suggest using DestinationType = FILE_URI or NATIVE_URI which both return a path/file similar to the following: content://media/external/images/media/1249. They specifically warn against returning a base64 encoded string.</p>
  
  <p>"Return base64 encoded string. DATA_URL can be very memory intensive and cause app crashes or out of memory errors. Use FILE_URI or NATIVE_URI if possible"
  <a href="https://github.com/apache/cordova-plugin-camera#module_Camera.DestinationType" rel="nofollow noreferrer">https://github.com/apache/cordova-plugin-camera#module_Camera.DestinationType</a></p>
  
  <p>It seems like the new/correct approach here is to use the cordova-plugin-file to get the file, turn this file into a blob, and then post it to the API.</p>
  
  <p>First, I think I need to convert the camera localFile using resolveLocalFilesystemUrl from cordova-plugin-file: <a href="https://ionicframework.com/docs/native/file/" rel="nofollow noreferrer">https://ionicframework.com/docs/native/file/</a>.</p>
  
  <pre><code>this.file.resolveLocalFilesystemUrl(localFile).then((entry) =&gt; {
      console.log(entry.fullPath);
  });
  </code></pre>
  
  <p>Android Example:</p>
  
  <pre><code>localFile: content://media/external/images/media/1249
  resolvedLocalFile: content://media/external/images/media/1827
  </code></pre>
  
  <p>However, I've been unable to use the resolvedLocalFile with cordova-plugin-file to get the file and convert to blob (and then finally post to API).</p>
  
  <p>Is this the correct approach? If so, what's a working code example of this. If not, what's the correct approach? Note that I've seen examples posting base64 encoded strings but cordova-plugin-camera explicitly warns against this.</p>