guumaster/00-README.md

## 00-README.md

      
    Raw
  

              00-README.md
            
          
    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 :).

  
## 01-backend-url-generation.js
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 );

## 02-upload-form.html
<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>

## 03-upload.js
// 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;
  });
}
	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;
	});
	}