AWS S3 file upload with progress bar using javascript sdk

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.

Step 1: Add the AWS SDK into the head section of your file.

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.207.0.min.js"></script> 

Step 2: Initiate the AWS Configuration.

There are two to initialize the AWS Configuration.

A. By using the AWS Key & Secret Key but it is not advisable to display your keys directly on page.

<script type="text/javascript">
    AWS.config.update({
        accessKeyId: 'AWS_ACCESS_KEY',
        secretAccessKey: 'AWS_SECRET_KEY',
        region: 'AWS_REGION'
    });
</script>

B. By using the AWS Identity Pool Id (I recommand using the identityPoolId)

<script type="text/javascript">
    AWS.config.update({
        credentials: new AWS.CognitoIdentityCredentials({
            IdentityPoolId: 'AWS_Identity_Pool_Id'
        }),
        region: 'AWS_REGION'
    });
</script>

Step 3: Lets start the uploading

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!');
})

To upload the file successfully, you need to enable CORS configuration on S3.

Please comment below if you have any question.