Search code examples
node.jsreactjsexpressmultermern

Not able to access images from upload folder - express - multer - react

I am working on my first ever MERN stack web app. I finished development and trying to host in VPS. Everything working fine. But, I am not able to view the uploaded images. I share you the few details about the project structure.

  1. React app is build for production and kept in public folder.
  2. Upload folder is created where user uploaded images are kept and its location is stored in DB. (ex: /uploads/user1/img1.jpg). Using Multer to handle image upload.

This is the folder structure of my Express server which also servers static files.

 -MAIN_EXPRESS_APP_FOLDER
    ------Routes 
    ------Public
    ------Uploads
    ------package.json

To make public and upload static, following codes are added in Server.js file:

app.use(express.static(path.join(__dirname,'/public')));
app.get('/*',(req,res)=>{
  res.sendfile(path.join(__dirname='public/index.html'));
})
app.use('/uploads', express.static('uploads'))

I am able to access my web app and also i can insert data in DB. Image upload is working as expected. But, Express not serving uploaded images. What could be problem?

Solution

  • As for static content you set the folder to be public now what i think is you should move your uploads folder inside public and try to access the images hope they will be served currently your application is not allowing to server data else then public directory hope it will help you