Cannot GET /__dirname/public/uploads/health3.jpeg-1644004134445.jpeg -- Can't display images on web browser but uploads to mongo db and node-express

Question

I am creating a MEAN STACK APP for ecommerce store/shopping cart.During the image uploads to mongo db from node-express and using postman , i can successfully add images and view it in the server/IDE but after adding and copying the link from postman into the browser it says : Cannot GET /__dirname/public/uploads/health3.jpeg-1644004134445.jpeg.i also added the express.static

Here's my code.. app.js

const express = require("express");
const app = express();
app.use(express.json());
const morgan = require("morgan");
const mongoose = require("mongoose");
const cors = require("cors");
require("dotenv/config");
const authJwt = require("./helpers/jwt");
const errorHandler = require("./helpers/error-handler");
app.use(cors());
app.options('*', cors());


//middleware
app.use(morgan("tiny"));
app.use(authJwt());

app.use('/public/uploads/', express.static(__dirname + '/public/uploads/'));
app.use(errorHandler);



//Importing routing of products
const categoriesRoutes = require("./routes/categories");
const productsRoutes = require("./routes/products");
const usersRoutes = require("./routes/users");
const ordersRoutes = require("./routes/orders");
const req = require("express/lib/request");
const res = require("express/lib/response");



const api = process.env.API_URL;

//routers
app.use(`${api}/products`, productsRoutes);
app.use(`${api}/categories`, categoriesRoutes);
app.use(`${api}/orders`, ordersRoutes);
app.use(`${api}/users`, usersRoutes);

//Database
mongoose
  .connect(process.env.CONNECTION_STRING, {
    useNewurlParser: true,
    useUnifiedTopology: true,
    dbName: "eshop-database",
  })
  .then(() => {
    console.log("database connection is ready");
  })
  .catch((err) => {
    console.log(err);
  });

 
  
//Server
app.listen(3000, () => {
  console.log("Server is Running http://http://localhost:3000");
});

product.js where i post and get images:

const { Product } = require("../models/product");
const express = require("express");
const { Category } = require("../models/category");
const req = require("express/lib/request");
const res = require("express/lib/response");
const router = express.Router();
const mongoose = require('mongoose');
const multer = require('multer');

const FILE_TYPE_MAP = {
  'image/png': 'png',
  'image/jpeg': 'jpeg',
  'image/jpg': 'jpg'
}


const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    const isValid = FILE_TYPE_MAP[file.mimetype];
    let uploadError = new Error('invalid image type');
    if(isValid) {
      uploadError = null
    }
    cb(uploadError, __dirname + '/public/uploads')
  },
  filename: function (req, file, cb) {
    
    const fileName = file.originalname.split(' ').join('-');
    const extension = FILE_TYPE_MAP[file.mimetype];
    cb(null, `${fileName}-${Date.now()}.${extension}`)
  }
})
  const uploadOptions = multer({ storage: storage })

router.get(`/`, async (req, res) => {
  let filter = {};
  if (req.query.categories) {
     filter = {category: req.query.categories.split(',')}
  }
  const productList = await Product.find(filter).populate('category');
  if (!productList) {
    res.status(500).json({ success: false });
  }
  res.status(200).send(productList);
});

router.get(`/:id`, async (req, res) => {
  const product = await Product.findById(req.params.id).populate('category');
  
  if (!product) {
    res.status(500).json({ success: false })
  }
  res.status(200).send(product);
})

router.post(`/`, uploadOptions.single('image'), async (req, res) => {
  const category = await Category.findById(req.body.category);
   if(!category) return res.status(400).send('Invalid Category');
   const file = req.file;
   if(!file) return res.status(400).send('no image in the request');
  const fileName = file.filename;
  const basePath = `${req.protocol}://${req.get('host')}/__dirname/public/uploads/`;
  let product = new Product({
    name: req.body.name,
    image: `${basePath}${fileName}`,
    description: req.body.description,
    countInStock: req.body.countInStock,
    price: req.body.price,
    category: req.body.category,
    isFeatured: req.body.isFeatured,
    images: req.body.images,
    brand: req.body.brand,
  })

    product = await product.save();
  
    if (!product) return res.status(500).send('The product cannot be created');
    res.send(product);
  
});

router.put('/:id', uploadOptions.single('image'), async (req, res)=> {
  if(!mongoose.isValidObjectId(req.params.id)) {
     return res.status(400).send('Invalid Product Id');
  }
  const category = await Category.findById(req.body.category);
   if(!category) return res.status(400).send('Invalid Category');
  
   const product = await Product.findById(req.params.id);
   if(!product) return res.status(400).send('Invalid Product');

  const file = req.file;
  let imagepath;

  if(file) {
    const fileName = file.filename;
  const basePath = `${req.protocol}://${req.get('host')}/__dirname/public/uploads/`;
    imagepath = `${basePath}${fileName}`
  } else {
    imagepath = product.image;
  }

  const updatedProduct = await Product.findByIdAndUpdate(
    req.params.id,
    {
    name: req.body.name,
    image: imagepath,
    description: req.body.description,
    countInStock: req.body.countInStock,
    price: req.body.price,
    category: req.body.category,
    isFeatured: req.body.isFeatured,
    brand: req.body.brand,
    },
    { new: true}
    );
    if(!updatedProduct) return res.status(500).send("the product cannot be updated!");
    res.send(updatedProduct);
});

router.delete('/:id', (req, res)=> {
  Product.findByIdAndRemove(req.params.id).then(product => {
    if(product) {
      return res.status(200).json({success: true, message: 'product deleted!'});
    } else {
      return res.status(404).json({success: false, message: 'product not found!'});
    }
  }) .catch (err => {
    return res.status(400).json({success: false, error: err});
  });
});

router.get(`/get/count`, async (req, res) =>{
 const productCount = await Product.countDocuments((count) => count)
  
  if (!productCount) {
    res.status(500).json({ success: false })
  }
    res.send({productCount: productCount});
});


router.get(`/get/featured/:count`, async (req, res) => {
  const count = req.params.count ? req.params.count : 0;
  const products = await Product.find({ isFeatured: true }).limit(+count);

  if (!products) {
      res.status(500).json({ success: false });
  }
  res.send(products);
});

router.put('/gallery-images/:id', 
  uploadOptions.array('images', 10), async (req, res)=> {
      if(!mongoose.isValidObjectId(req.params.id)){
          return res.status(400).send('Invalid Product Id')
      }
      const files = req.files;
      let imagesPaths = [];
      const basePath = `${req.protocol}://${req.get('host')}/__dirname/public/uploads/`;
      if(files) {
       files.map(file =>{
         imagesPaths.push(`${basePath}${file.filename}`);
       });
      }
      
      const product = await Product.findByIdAndUpdate(
        req.params.id,
        {
            images: imagesPaths
        },
        { new: true});
        if(!product) return res.status(500).send("the gallery cannot be updated!");
         res.send(product);
});
  
module.exports = router;

I can add images to mongodb and i can view it in the IDE but when i copy the image link to the browser it doesn't work. I've added images 1)postman usage , enter image description here folder.

---

edit

i've created public/uploads in the wrong folder..silly me🤣