CODEWITHSUNDEEP
node.jsreactjsapiexpressbackend
Jithin Joseph
Jithin Joseph

Reputation: 151

Send multiple images from node js to frontend

I am implementing a gallery where i wanted to show all images in a page - Reactjs or Angular

How can i send multiple images to frontend from NODE? I was able to send one image file saved in a folder in nodejs. Below is the code for sending single image - im able to see that image using POSTMAN

Note : here im fetching the image name from a table - These images are there in event folder(image1.jpg, image2.jpg...)

  console.log(req.files);
  const {id} = req.params;
  var sql = "SELECT image from users_image where id = ?";
  var query = db.query(sql, [id], function(err, result) {
    if(err){
      console.log("Error ", err);
      res.status(500).send(err)
    } else {
      const fileNameAndPath = result[0].image; //image1.jpg
      if(err) res.status(500).send(err);
      res.sendFile(fileNameAndPath, { root: './public/images/upload_images/event' })
    }
  });
}

But im not able to send multiple images using sendFile() as it does only single image. How can i implement this?

is it possible to get the preview using postman if i sent multiple images from node?

I could find many example which reads images from server but to html files in same backend directory. They are not sending the response to frontend, so that we can get the image and show in out ui built in react or angular.

Is my approach correct? Planning to deploy frontend, backend and DB in same server

Upvotes: 0

Views: 2481

Answers (2)

ReflexEcho
ReflexEcho

Reputation: 66

If I understood correctly, your images are in a folder that is located in your NODE JS backend folder and you want to send multiple images depending on request from your REACT Side.

To do this you can make the folder where you stored those images in backend as a public static folder.

In your entry point of Node Application,

app.use(express.static(__dirname+'/<foldername>'));

Now suppose you have a image inside the folder named flower.jpg, car.png and jolly.jpg that you want to send.

The URL for these images will be :

localhost:<port number>/<image name>

For example :

localhost:3000/car.png localhost:3000/flower.jpg

Now to access from your react code all you need to do is, replace localhost with the IP of your NodeJS Server.

Something like : 172.32.112.12:3000/car.png

You just need to make sure that the image names are not something common and easy. My image names are something like 1639873167172-464191690.jpg. I change it while I store it on database.

Upvotes: 1

Chew Han Xiang
Chew Han Xiang

Reputation: 106

If the photos are already hosted on your server, you should send an array of urls to the photos. In the frontend, you can loop through the array of urls and display the images using image tags.

Upvotes: 1

Related Questions