Passing a Cordova camera.getPicture File to AWS S3 (JS SDK)

Question

I am trying to pass an image created by Cordova's camera plugin to Amazon Web Service's S3.

In the past, I have used the HTML File API to create my S3 params, and been able to pass the file object. I can't directly link to how you do this, but there is an example on this page under the section 'example uses the HTML5 File API to upload a file on disk to S3'.

But this file has not been inserted by an input element, so I can't access anything like files[0] - the file is returned by Cordova either as a base64 or an available file location. So I am trying to figure out how I would replicate that action using Cordova information.

The solution I have worked off of is found here which results in the code below:

function onSuccess(imageData) {
   window.resolveLocalFileSystemURL(imageData, function(fileEntry) {
      fileEntry.file(function(file) {
         var reader = new FileReader();
         reader.onloadend = function(evt) {
            var theBody = btoa(evt.target._result);
            var 3_params = {
               Bucket: 'the-Bucket',
               Key: 'the-Key',
               ContentType: file.type,
               Body: theBody
            }
            ...other S3 SDK code...
         };
         reader.readAsDataURL(file);
      }
   }
}

This process works, but:

I have to take _result (which is a base64) through btoa which means...
It is pretty slow.
It results in larger file sizes than I should need
It also requires that I use getObject instead of getSignedURL
When I get each object, I then have to put it through atob which means...
If I have several objects to get things go VERY slow

What I would like to do is send the actual file object instead of messing with this base64. Alternatively, I would take a better/smarter/faster way to handle the base64 to S3 process.

score 2 · Accepted Answer · answered Sep 22 '15 at 19:18

I was able to use the 'JavaScript Canvas to Blob' polyfill to create a blob from my Base64, and then send the returned Blob on to S3. Because it is now a blob instead of a coded string, I can use getSignedURL in the s3 APK to reference the image.

The only change from above is:

var theBody = btoa(evt.target._result);

Becomes

var theBody = window.dataURLtoBlob(evt.target._result);

https://github.com/blueimp/JavaScript-Canvas-to-Blob

Igor.K · Answer 2 · 2017-10-29T11:45:33.957

For those who find this, there is a better way since the new features introduced in XMLHttpRequest and now we can use readers and Blob as a source.

The initial code now could be written using FileReader.readAsArrayBuffer method and passing Blob object as the body source:

function onSuccess(imageData) {
  window.resolveLocalFileSystemURL(imageData, function(fileEntry) {
    fileEntry.file(function(file) {
      var reader = new FileReader();
        reader.onloadend = function(evt) {
          var blob = new Blob([new Uint8Array(this.result)], { type: file.type });
          var 3_params = {
            Bucket: 'the-Bucket',
            Key: 'the-Key',
            ContentType: file.type,
            Body: blob
         }
         ...other S3 SDK code...
       };
       reader.readAsArrayBuffer(file);
     }
   }
 }

More info can be found at Cordova Blog - Transition off of cordova-plugin-file-transfer

Passing a Cordova camera.getPicture File to AWS S3 (JS SDK)

2 Answers2