How to display images of products stored on aws s3 bucket

user_16426737 0
Viewed 1320

I was practicing on this tutorial https://www.youtube.com/watch?v=NZElg91l_ms&t=1234s

It is working absolutely like a charm for me but the thing is I am storing images of products I am storing them in bucket and lets say I upload 4 images they all are uploaded. but when I am displaying them i got access denied error as I am displaying the list and repeated request are maybe detecting it as a spam

This is how i am trying to fetch them on my react app //rest of data is from mysql datbase (product name,price) //100+ products

{ products.map((row)=>{

<div className="product-hero"><img src=`http://localhost:3909/images/${row.imgurl}`</div>
<div className="text-center">{row.productName}</div>
})
}

as it fetch 100+ products from db and 100 images from aws it fails

Sorry for such detailed question but in short how can i fetch all product images from my bucket

Note I am aware that i can get only one image per call so how can I get all images one by one in my scenario

//download code in my app.js

const { uploadFile, getFileStream } = require('./s3')

const app = express()

app.get('/images/:key', (req, res) => {
  console.log(req.params)
  const key = req.params.key
  const readStream = getFileStream(key)

  readStream.pipe(res)
})

//s3 file

// uploads a file to s3
function uploadFile(file) {
  const fileStream = fs.createReadStream(file.path)

  const uploadParams = {
    Bucket: bucketName,
    Body: fileStream,
    Key: file.filename
  }

  return s3.upload(uploadParams).promise()
}
exports.uploadFile = uploadFile


// downloads a file from s3
function getFileStream(fileKey) {
  const downloadParams = {
    Key: fileKey,
    Bucket: bucketName
  }

  return s3.getObject(downloadParams).createReadStream()
}
exports.getFileStream = getFileStream
reactjs node.js amazon-web-services amazon-s3
2 Answers

It appears that your code is sending image requests to your back-end, which retrieves the objects from Amazon S3 and then serves the images in response to the request.

A much better method would be to have the URLs in the HTML page point directly to the images stored in Amazon S3. This would be highly scalable and will reduce the load on your web server.

This would require the images to be public so that the user's web browser can retrieve the images. The easiest way to do this would be to add a Bucket Policy that grants GetObject access to all users.

Alternatively, if you do not wish to make the bucket public, you can instead generate Amazon S3 pre-signed URLs, which are time-limited URLs that provides temporary access to a private object. Your back-end can calculate the pre-signed URL with a couple of lines of code, and the user's web browser will then be able to retrieve private objects from S3 for display on the page.

user_1747770

I did sililar S3 image handling while I handle my blog's image upload functionality, but I did not use getFileStream() to upload my image.

Because nothing should be done until the image file is fully processed, I used fs.readFile(path, callback) instead to read the data.

My way will generate Buffer Data, but AWS S3 is smart enough to know to intercept this as image. (I have only added suffix in my filename, I don't know how to apply image headers...)

This is my part of code for reference:

fs.readFile(imgPath, (err, data) => {
        if (err) { throw err }
        // Once file is read, upload to AWS S3
        const objectParams = {
          Bucket: 'yuyuichiu-personal',
          Key: req.file.filename,
          Body: data
        }
        S3.putObject(objectParams, (err, data) => {
          // store image link and read image with link
        }
}
user_155203690
Related