Upload file to AWS S3 from salesforce

In case of large file upload, more than 2 GB of file size, Salesforce is not able to offer file or attachment capability. The other option is to upload it on AWS S3 Bucket.

Amazon Simple Storage Service (Amazon S3) is a web-based cloud storage service aimed towards online upload of data on Amazon Web Services. This post will not talk about how to create S3 bucket, I will cover that as another post

<apex:page showHeader="false" sidebar="false" controller="AccountRemoter">
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.503.0.min.js" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" />
<apex:slds />
<div class="slds-grid slds-grid_align-center slds-m-vertical_x-large">
<div class="slds-box">
<div class="slds-m-bottom_medium">
S3 upload up to 5TB
</div>
<input type="file" id="file-chooser" />
<button class="slds-button slds-button_brand" type="button" onclick="uploadJS();">Upload</button>
<div>Percent Complete:</div>
<div id="percentComplete"></div>
</div>
</div>
<script>
function uploadJS() {
var file = $('#file-chooser')[0].files[0];
//dont do this, get access from cognito
AWS.config = new AWS.Config({credentials: new AWS.Credentials({accessKeyId: 'ACCESSKEY HERE', secretAccessKey: 'SECRET KEY HERE'}), region: 'us-east-2'});

var s3 = new AWS.S3();
const params = {Bucket: 'aws-bucket-name', Key: 'FOLDERNAME/' + file.name, ContentType: file.type, Body: file};
s3.upload(params, function (err, data) {
console.log('done');
}).on('httpUploadProgress', function (progress) {
$('#percentComplete').text((((progress.loaded/progress.total) *100).toFixed(2))+'%');
console.log(progress.loaded + " of " + progress.total + " bytes");
});

var filename=file.name;
// Here we can update the name of the file on record field
// start remoting work
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.AccountRemoter.updateFileName}',
filename,
function(result, event){
if (event.status) {
// Get DOM IDs for HTML and Visualforce elements like this
console.log('in here '+result.Id);
} else if (event.type === 'exception') {
document.getElementById("responseErrors").innerHTML =
event.message + "<br/>\n<pre>" + event.where + "</pre>";
} else {
document.getElementById("responseErrors").innerHTML = event.message;
}
},
{escape: true}
);

// end remoting work
}
</script>

<div id="responseErrors"></div>
</apex:page>