Skip to content

Instantly share code, notes, and snippets.

@rastandy
Forked from guumaster/00-README.md
Created April 20, 2019 17:08
Show Gist options
  • Save rastandy/92c1c584e1526f9659fcab1f34fdc786 to your computer and use it in GitHub Desktop.
Save rastandy/92c1c584e1526f9659fcab1f34fdc786 to your computer and use it in GitHub Desktop.
How to upload a file with $.ajax to AWS S3 with a pre-signed url

Upload a file with $.ajax to AWS S3 with a pre-signed url

When you read about how to create and consume a pre-signed url on this guide, everything is really easy. You get your Postman and it works like a charm in the first run.

Then you open your browser, try your usual $.ajax() and send your PUT operation, and you hit the cold iced wall of AWS error message, a simple <Code>SignatureDoesNotMatch</Code> that will steal hours from your productivity.

So here I come to save you and give you a free working example of how to upload a file directly to AWS S3 from your browser. You are wellcome :).

var s3 = new AWS.S3({
accessKeyId: '<YOUR_ACCESS_KEY>',
secretAccessKey: '<YOUR_SECRET_ACCESS_KEY>'
});
var uploadPreSignedUrl = s3.getSignedUrl('putObject', {
Bucket: '<THE_BUCKET_NAME>',
Key: '<THE_UPLOADED_FILENAME>',
ACL: 'authenticated-read',
// This must match with your ajax contentType parameter
ContentType: 'binary/octet-stream'
/* then add all the rest of your parameters to AWS puttObect here */
});
var downloadPreSignedUrl = s3.getSignedUrl('getObject', {
Bucket: '<THE_BUCKET_NAME>',
Key: '<THE_UPLOADED_FILENAME>',
/* set a fixed type, or calculate your mime type from the file extension */
ResponseContentType: 'image/jpeg'
/* and all the rest of your parameters to AWS getObect here */
});
// now you have both urls
console.log( uploadPreSignedUrl, downloadPreSignedUrl );
<form id="theForm" method="POST" enctype="multipart/form-data" >
<input id="theFile" name="file" type="file"/>
<button id="theButton" type="submit">send 1</button>
</form>
After you uploaded the file you can <a href="<YOUR_PRE_SIGNED_DOWNLOAD_URL_HERE>">download it here</a>
<script src="upload.js"></script>
// Remember to include jQuery somewhere.
$(function() {
$('#theForm').on('submit', sendFile);
});
function sendFile(e) {
e.preventDefault();
// get the reference to the actual file in the input
var theFormFile = $('#theFile').get()[0].files[0];
$.ajax({
type: 'PUT',
url: "<YOUR_PRE_SIGNED_UPLOAD_URL_HERE>",
// Content type must much with the parameter you signed your URL with
contentType: 'binary/octet-stream',
// this flag is important, if not set, it will try to send data as a form
processData: false,
// the actual file is sent raw
data: theFormFile
})
.success(function() {
alert('File uploaded');
})
.error(function() {
alert('File NOT uploaded');
console.log( arguments);
});
return false;
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment