AWS S3 File Download from the client-side

Here is my solution:

let downloadImage = url => {
  let urlArray = url.split("/")
  let bucket = urlArray[3]
  let key = `${urlArray[4]}/${urlArray[5]}`
  let s3 = new AWS.S3({ params: { Bucket: bucket }})
  let params = {Bucket: bucket, Key: key}
  s3.getObject(params, (err, data) => {
    let blob=new Blob([data.Body], {type: data.ContentType});
    let link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download=url;
    link.click();
  })
}

The url in the argument refers to the url of the S3 file.

Just put this in the onClick method of your button. You will also need the AWS SDK

If the file you are trying to download is not public then you have to create a signed url to get that file.

The solution is here Javascript to download a file from amazon s3 bucket? for getting non public files, which revolves around creating a lambda function that will generate a signed url for you then use that url to download the file on button click

BUT if the file you are trying to download you is public then you don't need a signed url, you just need to know the path to the file, the urls are structured like: https://s3.amazonaws.com/ [file path]/[filename]

They is also aws amplify its created and maintain by AWS team.

Just follow Get started and downloading the file from your react app is simply as:

Storage.get('hello.png', {expires: 60})
.then(result => console.log(result))
.catch(err => console.log(err));