Uploading FormData from Trigger.io Forge to Amazon S3

Question

I am trying to upload an image file from my Trigger.io mobile app directly to Amazon S3 (see here: http://aws.amazon.com/articles/1434). I'm able to do this on the web without any problems using jQuery and the FormData API as follows:

var fd = new FormData();
key = 'test.jpg'

fd.append('key', key);
fd.append('acl', 'public-read');
fd.append('Content-Type', file.type);
fd.append('AWSAccessKeyId', key_id);
fd.append('policy', policy_base64);
fd.append('signature', signature);
fd.append('file', file);

$.ajax({
    type: 'POST',
    url: 'https://' + bucket + '.s3.amazonaws.com/',
    processData: false, // Not supported with Trigger
    contentType: false, // Not supported with Trigger
    data: fd,
    success: function(response) {
        // It worked...
    }
});

However, I'm unable to get this working with the Forge request API. This is what I have tried:

forge.request.ajax({
    type: 'POST',
    url: 'https://' + bucket + '.s3.amazonaws.com/',
    fileUploadMethod: 'raw',
    files: [file],
    data: fd,
    headers: { 'Content-Type': 'multipart/form-data', 'x-amz-acl': 'public-read' },
    success: function(response) {
        // It worked...
    }
});

But, I receive the following error from Amazon:

<Code>PreconditionFailed</Code>
<Message>At least one of the pre-conditions you specified did not hold</Message>
<Condition>Bucket POST must be of the enclosure-type multipart/form-data</Condition>

I would circumvent this forge.request entirely in favor of $.ajax, but my file was retrieved using the Forge File API and just shows up on S3 as [object Object] (I assume because it's a Forge file, not a true file object from an HTML <input />).

So, how can I upload a file in Trigger.io to Amazon S3 using FormData and the Forge API? Any help is greatly appreciated! Thanks!

Answer 1

You are able to use the jQuery ajax $.ajax function and the FormData JavaScript API to upload an image file from your Trigger.io mobile app directly to Amazon S3 as you have done on the web.

You will need to perform the following steps:

1. Retrieve your file using the forge.file API.
2. Call forge.file.base64 to return the base64 value for your file's content.
3. Create a JavaScript Blob object from the returned base64 value
4. Append the Blob object to your FormData object
5. Call your $.ajax function to POST the file to Amazon S3

As an example, once you have retrieved your image file (Step 1), you could use the following uploadImage function to upload your image to Amazon S3:

function uploadImage(file, awsAccessKeyId, policy, signature, bucket) {
    forge.file.base64(file, function (base64String) {
      // Create a Blob from a base64 string
      var byteCharacters = atob(base64String);
      var byteNumbers = new Array(byteCharacters.length);
      for (var i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
      }
      var byteArray = new Uint8Array(byteNumbers);
      var blob = new Blob([byteArray.buffer], {type: "image/jpeg"});

      var fd = new FormData();
      fd.append('key', 'test.jpg');
      fd.append('acl', 'public-read');
      fd.append('Content-Type', 'image/jpeg');
      fd.append('AWSAccessKeyId', awsAccessKeyId);
      fd.append('policy', policy);
      fd.append('signature', signature);    
      fd.append("file", blob);

      $.ajax({
        type: 'POST',
        url: 'http://' + bucket + '.s3.amazonaws.com/',
        processData: false,
        contentType: false,
        data: fd,
        success: function(response) {
          alert('Success uploading photo');
        },
        error: function () {
          alert('Problem uploading photo');
        }
     });    
  });
}