CODEWITHSUNDEEP
javascriptnode.jsreactjsamazon-web-servicesamazon-s3
Jason Javier
Jason Javier

Reputation: 201

AWS S3 File Download from the client-side

I am currently trying to download the file from the s3 bucket using a button from the front-end. How is it possible to do this? I don't have any idea on how to start this thing. I have tried researching and researching, but no luck -- all I have searched are about UPLOADING files to the s3 bucket but not DOWNLOADING files. Thanks in advance.

NOTE: I am applying it to ReactJS (Frontend) and NodeJS (Backend) and also, the file is uploaded using Webmerge

UPDATE: I am trying to generate a download link with this (Tried node even if I'm not a backend dev) (lol)

see images below

what I have tried so far

onClick function

Upvotes: 15

Views: 47375

Answers (2)

Jordan Daniels
Jordan Daniels

Reputation: 5304

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

Upvotes: 13

Tiisetso Tjabane
Tiisetso Tjabane

Reputation: 2106

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));

Upvotes: 17

Related Questions