Uploading image to S3 using phonegap, how to?

Question

I'm trying to get some image onto a S3 but not quite succeeding... Here is my work so far

$cordovaCamera.getPicture(options).then(function(imageURI) {
  // imageURI will be something like: file:///some_path

  // get the base64 data from the image
  var img = Utils.encodeImageUri(imageURI);

  // get the base64 from a new image, not sure if this is needed
  var image = new Image();
  image.src = img;


  Utils.uploadToS3(image.src);
}, function(err) {})

...

// boilerplate function to create a Blob
dataURItoBlob: function(dataURI) {
  var binary = atob(dataURI.split(',')[1]);
  var array = [];
  for (var i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i));
  }

  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  return new Blob([new Uint8Array(array)], {
    type: mimeString
  });
},


// the actual upload
uploadToS3: function(imageData) {
  var imgData = this.getImgData(imageData); // will return Object {extension: "jpg", type: "image/jpeg"}
  var data    = this.dataURItoBlob(imageData);

  AWS.config.update({accessKeyId: accessKey, secretAccessKey: secretKey});
  var bucket = new AWS.S3({params:{Bucket: 'testbucket'}});

  var params = {
    Key: 'main.' + imgData.extension,
    Body: data,
    ContentEncoding: 'base64',
    ContentType: imgData.type
  };

  bucket.upload(params, function(err, data) {
    console.log(data.Location); // this will be the path to my image on s3
  });
}

All I am doing is just grabbing the base64 data from the image, creating a Blob and sending it to amazon

I do get a image in the bucket, so sending the data over works, but the image is either black or sometimes broken

Any ideas?

Answer 1

Finally.. here is my fix.

Basically the destinationType needs to be Camera.DestinationType.DATA_URL

That will return imageData to be the encoded data.

Then send that to S3, but append data:image/jpeg;base64, so S3 will know what's going on

see full code below:

  var options = {
    destinationType: Camera.DestinationType.DATA_URL, // this needs to be DATA_URL 
    sourceType: Camera.PictureSourceType.PHOTOLIBRARY // i am getting this image from the library. Use CAMERA if you wnat to take a pic
  };

  $cordovaCamera.getPicture(options).then(function(imageData) {
    // make sure the imageData is base64 encoded
    Utils.uploadToS3('data:image/jpeg;base64,' + imageData);

  }, function(err) {
    console.log(err);
  })

...

uploadToS3: function(imageData) {
  var imgData = this.getImgData(imageData); // or just hardcode {extension: "jpg", type: "image/jpeg"} if you only want jpg
  var key = 'SOME_IMAGE_NAME.' + imgData.extension; // bucket path after BUCKET_NAME

  AWS.config.update({
    accessKeyId: ACCESS_KEY_HERE,
    secretAccessKey: SECRET_ACCESS_KEY_HERE
  });

  var bucket = new AWS.S3({params: {Bucket: 'BUCKET_NAME_HERE'}});
  var params = {
    Key: key,
    Body: imageData,
    ContentEncoding: 'base64',
    ContentType: imgData.type
  };

  bucket.upload(params, function(err, data) {
    if (err) {
      console.log(err);
    } else {
      //data.Location is your s3 image path
    }
  });
}

... helpers ...

  getImgData: function(img) {
    var extension = 'jpg';
    var type = 'image/jpeg';
    var base64result = img.split(',')[0];
    if (base64result.indexOf("png") > -1) {
      extension = 'png';
      type = 'image/png';
    }

    return {
      extension: extension,
      type: type
    };
  },