How to upload to AWS S3 directly from browser using a pre-signed URL instead of credentials?

Question

We\'d like to use Javascript AWS SDK to upload files to S3, but without using credentials at all. Uploading using credentials works, but we cannot generate an AWS IAM user f

Answer 1

Generate Url

const AWS = require("aws-sdk");
const s3 = new AWS.S3({
   endpoint: 's3-ap-south-1.amazonaws.com',   // Put you region
   accessKeyId: 'AKXXXXXXXXXXXXXXXA6U',       // Put you accessKeyId
   secretAccessKey: 'kzFHoXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXssoGp',   // Put you accessKeyId
   Bucket: 'Bucket-Name',         // Put your bucket name
   signatureVersion: 'v4',
   region: 'ap-south-1'           // Put you region
});

const getSingedUrlforPut = async () => {
const params = {
    Bucket: 'Bucket-Name',
    Key: '317ec11af14a46b89f400bcf8f9fff1222.pdf',
    Expires: 60 * 5
  };
try {
    const url = await new Promise((resolve, reject) => {
      s3.getSignedUrl('putObject', params, (err, url) => {
        err ? reject(err) : resolve(url);
      });
    });
    console.log(url)
  } catch (err) {
    if (err) {
      console.log(err)
    }
  }
}
getSingedUrlforPut()

Upload file Via ajax

var form = new FormData();
form.append("", fileInput.files[0], "director_pan_af8ef2d261c46877f95038622c96e7c0.pdf");
var settings = {
  "url": "https://sme-testing.s3-ap-south-1.amazonaws.com/317ec11af14a46b89f400bcf8f9fff1222.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIXXXXXXXXXXXX6U%2F20200525%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20200525T083419Z&X-Amz-Expires=300&X-Amz-Signature=ea063731d7d043b62d0dc7c0984f4d5792c7f7f41e9ffb52a97d62adadcef422&X-Amz-SignedHeaders=host",
  "method": "PUT",
  "timeout": 0,
  "processData": false,
  "mimeType": "multipart/form-data",
  "contentType": false,
  "data": form
};
$.ajax(settings).done(function (response) {
  console.log(response);
});