{"id":21083,"date":"2015-06-17T11:45:33","date_gmt":"2015-06-17T06:15:33","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=21083"},"modified":"2016-12-20T16:07:50","modified_gmt":"2016-12-20T10:37:50","slug":"aws-s3-file-upload-with-progress-bar-using-javascript-sdk","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/aws-s3-file-upload-with-progress-bar-using-javascript-sdk\/","title":{"rendered":"AWS S3 file upload with progress bar using javascript sdk"},"content":{"rendered":"

You can upload files on AWS S3 using a\u00a0server side solution, but in case of larger files it is advisable to use a\u00a0client side solution. You can probably\u00a0use\u00a0JavaScript<\/a> file upload feature of AWS S3.\u00a0This is simple three step feature as described below:<\/p>\n

Step 1 : In the head section of your page include javascript sdk and specify your keys like this:<\/p>\n

[code]
\n<script src="https:\/\/sdk.amazonaws.com\/js\/aws-sdk-2.1.24.min.js"><\/script>
\n<script type="text\/javascript">
\n AWS.config.update({
\n accessKeyId : ‘ACCESS_KEY’,
\n secretAccessKey : ‘SECRET_KEY’
\n });
\n AWS.config.region = ‘AWS_REGION’;
\n<\/script>
\n[\/code]<\/p>\n

Step 2\u00a0: Now create a simple html form with a file input.<\/p>\n

[code]
\n<form id="fileUploadForm" method="post" enctype="multipart\/form-data">
\n<input type="file" name="file" id="file" value="dataFile" required="">
\n<\/form>
\n[\/code]<\/p>\n

Step 3\u00a0: Now upload your\u00a0input file to S3<\/p>\n

[code]
\n$("#fileUploadForm").submit(function() {
\nvar bucket = new AWS.S3({params: {Bucket: ‘BUCKET_NAME’}});
\nvar fileChooser = document.getElementById(‘file’);
\nvar file = fileChooser.files[0];
\nif (file) {
\nvar params = {Key: ‘FILE_NAME’, ContentType: file.type, Body: file};
\nbucket.upload(params).on(‘httpUploadProgress’, function(evt) {
\nconsole.log("Uploaded :: " + parseInt((evt.loaded * 100) \/ evt.total)+’%’);
\n}).send(function(err, data) {
\nalert("File uploaded successfully.");
\n});
\n}
\nreturn false;
\n});
\n[\/code]<\/p>\n

To upload the file successfully, you need to enable CORS configuration on S3.<\/p>\n

Generally, it is not advisable to display your keys directly on page, so you can use Amazon Cognito or web identity federation feature.<\/p>\n

Know more\u00a0<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

You can upload files on AWS S3 using a\u00a0server side solution, but in case of larger files it is advisable to use a\u00a0client side solution. You can probably\u00a0use\u00a0JavaScript file upload feature of AWS S3.\u00a0This is simple three step feature as described below: Step 1 : In the head section of your page include javascript sdk […]<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":69},"categories":[1174,7,1],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/21083"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=21083"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/21083\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=21083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=21083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=21083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}