Multipart upload to Amazon S3 using Javascript in Browser

Question

I am working on a project that requires me to upload large files directly from the browser to Amazon S3 using javascript.

Does anyone know how to do it? Is there Amazon Javascript SDK that supports this?

Answer 1

Try EvaporateJS. It has a large community and broad browser support. https://github.com/TTLabs/EvaporateJS.

Answer 2

Use aws-sdk-js to directly upload to s3 from browser. In my case the file sizes could go up to 100Gb. I used multipart upload, very easy to use.

I had to upload in a private bucket, for authentication I used WebIdentityCredentials. You also have an option to use CognitoIdentityCredentials.

Answer 3

If you can add logic to the server side, you could return a pre-signed S3 upload URL to the browser and upload the file straight to S3.

This answer has a similar code, but using AWS SDK v2.

Example in Javascript (source):

const { S3, PutObjectCommand } = require("@aws-sdk/client-s3");
const { getSignedUrl } = require("@aws-sdk/s3-request-presigner");
...
    const credentials = {
      accessKeyId: "KEY", // UPDATE THIS
      secretAccessKey: "SECRET", // UPDATE THIS
    };
    const options = {
      credentials,
      region: "REGION", // UPDATE THIS
      apiVersion: "2006-03-01", // if you want to fix the api version, optional
    };
    const s3Client = new S3(options);
    // Create the command
    const command = new PutObjectCommand({
      Bucket: 'BUCKET', // UPDATE THIS
      Key: 'OBJ_ID_ON_S3', // UPDATE THIS
    });
    // Create the presigned URL
    const signedUrl = await getSignedUrl(s3Client, command, {
      expiresIn: 60 * 2, // This makes the URL expires after 2 min
    });