How to Handle Error in S3 browser upload via POST - post

Question

I am newbie to S3. Trying to catch errors in S3 http://docs.aws.amazon.com/AmazonS3/2006-03-01/API/ErrorResponses.html
My code sample:
{"expiration": "2007-12-01T12:00:00.000Z",
"conditions": [
{"bucket": "johnsmith"},
["starts-with", "$key", ""],
{"acl": "private"},
{"success_action_redirect": "http://johnsmith.s3.amazonaws.com/successful_upload.html"},
["eq", "$Content-Type", "application/msword,application/pdf"],
["content-length-range", 2048, 20971520 ]
]
}';
<form action="http://johnsmith.s3.amazonaws.com/" method="post" enctype="multipart/form-data">
<input type="hidden" name="key" value="${filename}" /><br />
<input type="hidden" name="acl" value="private" />
<input type="hidden" name="success_action_redirect" value="http://johnsmith.s3.amazonaws.com/successful_upload.html" >
<input type="hidden" name="AWSAccessKeyId " value="15B4D3461F177624206A" />
<input type="hidden" name="Policy" value="eyAiZXhwaXJhdGlvbiI6ICIyMDA3LTEyLTAxVDEyOjAwOjAwLjAwMFoiLAogICJjb25kaXRpb25zIjogWwogICAgeyJidWNrZXQiOiAiam9obnNtaXRoIiB9LAogICAgWyJzdGFydHMtd2l0aCIsICIka2V5IiwgInVzZXIvZXJpYy8iXSwKICAgIHsiYWNsIjogInB1YmxpYy1yZWFkIiB9LAogICAgeyJyZWRpcmVjdCI6ICJodHRwOi8vam9obnNtaXRoLnMzLmFtYXpvbmF3cy5jb20vc3VjY2Vzc2Z1bF91cGxvYWQuaHRtbCIgfSwKICAgIFsic3RhcnRzLXdpdGgiLCAiJENvbnRlbnQtVHlwZSIsICJpbWFnZS8iXSwKICAgIHsieC1hbXotbWV0YS11dWlkIjogIjE0MzY1MTIzNjUxMjc0In0sCiAgICBbInN0YXJ0cy13aXRoIiwgIiR4LWFtei1tZXRhLXRhZyIsICIiXSwKICBdCn0K" />
<input type="hidden" name="Signature" value="2qCp0odXe7A9IYyUVqn0w2adtCA=" />
File: <input type="file" name="file" /> <br />
<input type="submit" name="submit" value="Upload to Amazon S3" />
</form>
Want to catch error if file is failed to upload or expired. To check content type, content length range.
Getting proper success callback variable like bucket, key, etag.
Thanks

Answer 1

using simple ajax form post...
<script>
function uploadFile() {
var file_name = $('#form1 :input[name="file"]').val().split('\\').pop();
if(!file_name || file_name.length === 0) {
alert('please choose file')
return false;
}
$.ajax({
url: "/getS3FormData.php",
cache: false,
type: 'GET',
data: {file_name : file_name} ,
async: false,
success: function (response) {
var s3 = JSON.parse(response);
handleFileUpload(s3);
},
error: function (error) {
alert("Upload FAILED :-( Retry.");
}
});
}
function handleFileUpload(s3) {
var fd = new FormData();
fd.append('key', s3.key);
fd.append('AWSAccessKeyId', s3.AWSAccessKeyId);
fd.append('acl', s3.acl);
fd.append('policy', s3.policy);
fd.append('signature', s3.signature);
fd.append('Content-Type', s3.content_type);
var file = $('#form1').find('input[name=file]')[0].files[0];
fd.append("file", file);
window.onbeforeunload = function () {
return "Upload in progress";
}
$.ajax({
url: s3.url,
data: fd,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
window.onbeforeunload = null;
window.location.href = s3.success_action_redirect;
},
error: function(error) {
window.onbeforeunload = null;
alert('Upload Failed, Please try again');
}
});
}
html form
<form id="form1" method="post" enctype="multipart/form-data">
<input type="file" name="file"></input>
<input type="submit" onclick="uploadFile(); return false;" value="Upload">
</form>

Answer 2

EDIT: My original answer used iframes but I finally got the XMLHttpRequest to work which I think it is a cleaner approach.
I've had the same problem. My requirements were:
I didn't want to use flash
I didn't want the user to see the AWS error XML
There are plenty of solutions scattered all over the internet. I got it to work in two versions:
Using an iFrame to render the POST result and by trying to access the uploaded file (in my case, an image) to check if the upload worked or not: https://gist.github.com/joaoffcosta/5728483
Using XMLHttpRequest to make the request and handle progress, completion and premature failure: https://gist.github.com/joaoffcosta/5729398 (Best solution IMO)
In both solutions, your S3 Bucket should allow 'Everyone' to 'Upload/Delete'.
Additionally, the XMLHttpRequest solution requires you to configure CORS on your bucket. To do it you should go to your bucket 'Permissions', press 'Add CORS Configuration' and add something like this:
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>http://your_website_or_localhost_server/</AllowedOrigin>
<AllowedMethod>POST</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
<ExposeHeader>x-amz-request-id</ExposeHeader>
<ExposeHeader>x-amz-id-2</ExposeHeader>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>