Send multiple images from node js to frontend

Question

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

Dharman · Accepted Answer · 2022-01-12 12:21:25Z

1

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.

edited Jan 12, 2022 at 12:21

Dharman♦

34k27 gold badges106 silver badges158 bronze badges

answered Jan 12, 2022 at 12:15

ReflexEcho

661 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jithin Joseph Over a year ago

Thanks for your reply. As @chew-han-xiang commented, I've already implemented this. Are there any drawbacks to this approach? Is that secure (or not unsecure)?

ReflexEcho Over a year ago

The only drawback to this approach is your public file can be easily accessible if the IP and image name is obtained. But, you can always filter the requests when someone calls the api. For example : validate the call using token. Apart from this drawback, it is one of best approach.

ksav · Accepted Answer · 2021-05-30 02:12:51Z

1

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.

edited May 30, 2021 at 2:12

ksav

20.9k6 gold badges52 silver badges69 bronze badges

answered May 29, 2021 at 15:03

Chew Han Xiang

1062 bronze badges

2 Comments

Jithin Joseph Over a year ago

The photos are not there in server. I have implemented an upload option from frontend to save in backend. That same images im trying to fetch.

Chew Han Xiang Over a year ago

I suppose you can still get the links to the images? If they are hosted on your server, say on localhost:3000 or www.example.com, and you have the filename of the image and the folder where it resides, you can construct the image url. If they are served as static files from your backend server, you should be able to reach them: localhost:3000/images/filename1.jpg

Collectives™ on Stack Overflow

Send multiple images from node js to frontend

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related