ENOENT: no such file or directory, open 'public/uploads/2023-10-14T17-47-28.635ZScreenshot_20231014_192203_Chrome.jpg'

Question

I am trying to get a code that runs perfect in development but fails in production after I deploy to work in production.

ENOENT: no such file or directory, open 'public/uploads/2023-10-14T17-47-28.635ZScreenshot_20231014_192203_Chrome.jpg'

Code snippet for the file I suspect to be the source of the error.

import multer from "multer";
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "public/uploads");
  },
  filename: function (req, file, cb) {
    cb(null, new Date().toISOString().replace(/:/g, '-') + file.originalname);
  },
});

const fileFilter = (req, file, cb) => {
  if (
    file.mimetype === "image/jpeg" ||
    file.mimetype === "image/png" ||
    file.mimetype === "image/jpg"
  ) {
    cb(null, true);
  } else
    ({ error: "Unsupported file format. Upload only JPEG/JPG or PNG" }, false);
};

const upload = multer({
  storage,
  limits: { fieldSize: 1024 * 1024 },
  fileFiter,
});

export default upload;

This is the error message toast

At first to make the code work locally i had to use the latest info available online and docs and solve it. It was some operating system incompatibility where the way that piece of code works in MAC-OS is not same for Windows which is actually the OS im using in development.

So I changed this piece of code:

filename: function (req, file, cb) { 
  cb(null, new Date().toISOString()  + file.originalname); 
},

To

filename: function (req, file, cb) { 
  cb(null, new Date().toISOString().replace(/:/g, '-') + file.originalname); 
},

This works well in development. I mean at localhost:3000. It is a full stack Next.js 13 project.

I am trying to upload product images to cloudinary but first im using multer to temporarily save the image in a folder instead the public folder called uploads.

import multer from "multer";
const storage = multer.diskStorage({ 

   destination: function (req, file, cb) { 
     cb(null, "public/uploads"); 
   }, 

   filename: function (req, file, cb) { 

     cb(null, new Date().toISOString().replace(/:/g, '-') + file.originalname); 
   }, 
 }); 

 const fileFilter = (req, file, cb) => { 

   if ( 
     file.mimetype === "image/jpeg" || 
     file.mimetype === "image/png" || 
     file.mimetype === "image/jpg" 
   ) { 
     cb(null, true); 
   } else 
     ({ error: "Unsupported file format. Upload only JPEG/JPG or PNG" }, false); 
 }; 

 const upload = multer({ 
   storage, 
   limits: { fieldSize: 1024 * 1024 }, 
   fileFilter, 
 }); 

 export default upload;

Then upload it from there to cloudinary.

export const uploadProductImages = async (req, res, next) => { 
   let product = await Product.findById(req.query.id); 
  
   if (!product) { 
     return next(new ErrorHandler("Product not found.", 404)); 
   } 
  
   const uploader = async (path) => await uploads(path, "buyitnow/products"); 
  
   const urls = []; 
   const files = req.files; 
  
   for (const file of files) { 
     const { path } = file; 
     const imgUrl = await uploader(path); 
     urls.push(imgUrl); 
     fs.unlinkSync(path); 
   } 
  
   product = await Product.findByIdAndUpdate(req.query.id, { 
     images: urls, 
   }); 
  
   res.status(200).json({ 
     data: urls, 
     product, 
   }); 
 };

when I deploy my project to vercel, I'm getting the same error again. Now when vercel is doing the hosting.

If you have come across this error, how did you got rid of it?