Uploading files on AWS S3 is very easy with AWS Javascript SDK. We're going to upload files to S3 in some simple steps.
Before going to next steps, I'm assuming you already have a file stored in fileToBeUpload variable in Javascript.
Let's Begin.
<h3>Step 1: Add the AWS SDK into the head section of your file.</h3>
<pre class="wp-block-preformatted">&lt;script src="<a href="https://sdk.amazonaws.com/js/aws-sdk-2.1.24.min.js">https://sdk.amazonaws.com/js/aws-sdk-2.207.0.min.js</a>"&gt;&lt;/script&gt; </pre>
<h3>Step 2: Initiate the AWS Configuration.</h3>
There are two to initialize the AWS Configuration.
A. By using the AWS Key &amp; Secret Key but it is not advisable to display your keys directly on page.
<pre class="wp-block-preformatted">&lt;script type="text/javascript"&gt;
&nbsp; &nbsp; AWS.config.update({
&nbsp; &nbsp; &nbsp; &nbsp; accessKeyId: 'AWS_ACCESS_KEY',
&nbsp; &nbsp; &nbsp; &nbsp; secretAccessKey: 'AWS_SECRET_KEY',
 region: 'AWS_REGION'
&nbsp; &nbsp; });
&lt;/script&gt;</pre>
B. By using the AWS Identity Pool Id (I recommand using the identityPoolId)
<pre class="wp-block-preformatted">&lt;script type="text/javascript"&gt;
&nbsp; &nbsp; AWS.config.update({
&nbsp; &nbsp; &nbsp; &nbsp; credentials: new AWS.CognitoIdentityCredentials({
 IdentityPoolId: 'AWS_Identity_Pool_Id'
 }),
 region: 'AWS_REGION'
&nbsp; &nbsp; });
&lt;/script&gt;</pre>
<h3>Step 3: Lets start the uploading</h3>
<div>
<pre>var bucketName = "AWS_BUCKET_NAME"; var fileToBeUpload = "FILE_TO_BE_UPLOAD"; var filePath = "demo/user_uploaded/"; // File will be saved to this folder on aws s3. // Initialize the AWS Object var bucket = new AWS.S3({ apiVersion: "2006-03-01", params: { Bucket: bucketName }, }); var params = { Key: filePath, ContentType: fileToBeUpload.type, Body: fileToBeUpload, ContentDisposition: "attachment", // if you want to enable file download via public url. }; /* turn off the timeout (Optional) */ AWS.config.httpOptions.timeout = 0; // upload file bucket.upload(params).on("httpUploadProgress", function (evt) { var uploaded = Math.round((evt.loaded / evt.total) * 100); console.log("File uploaded", uploaded, "%"); }) .send(function (err, data) { if (err) { // an error occurred, handle the error console.log(err, err.stack); return; } var fileUrl = data.Location; console.log("File URL:", fileUrl); alert("File is uploaded successfully!"); });</pre>
</div>
To upload the file successfully, you need to enable CORS configuration on S3.
Please comment below if you have any question.

Uploading files on AWS S3 is very easy with AWS Javascript SDK. We're going to upload files to S3 in some simple steps...

AWS S3 file upload with progress bar using javascript sdk