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!
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:
- Retrieve your file using the
forge.file
API. - Call
forge.file.base64
to return the base64 value for your file's content. - Create a JavaScript
Blob
object from the returned base64 value - Append the
Blob
object to yourFormData
object - Call your
$.ajax
function toPOST
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');
}
});
});
}
来源:https://stackoverflow.com/questions/23098223/uploading-formdata-from-trigger-io-forge-to-amazon-s3