Search code examples
reactjsexpressmulternginx-reverse-proxy

React application - file upload works on localhost but not on nginx server


Hope you can help.

the following code works when I run my application on local host, the file uploads correctly to the uploads folder in the root of the application. However when I try uploading a file from my live website an error appears.

onst upload = multer({  // Set up multer module to move uploaded file an rename the file
  storage: multer.diskStorage({
    destination(req, file, cb) {
      cb(null, 'uploads/'); //Sets the destination for the new file
    },
    filename(req, file, cb) {
      cb(null, `${new Date().getTime()}_${file.originalname}`); // renames file with the date, time and its original name
    }
  }),
  limits: {
    fileSize: 1024 * 1024 * 5  // Sets the max file size
  },
  fileFilter: (req, file, cb) => {// Only allows image files uploaded
    if (file.mimetype == "image/png" || file.mimetype == "image/jpg" || file.mimetype == "image/jpeg" || file.mimetype === 'image/gif' || file.mimetype ==='image/jfif' ) {
      cb(null, true);
    } else {
      cb(null, false);
      return cb( new Error('Only .png, .jpg and .jpeg format allowed!' ));
      
    }
  }
});

This is the error I get when it is live Error: ENOENT: no such file or directory, open 'build/public/uploads/1619823055971_GettyImages-640318118-c83a508.jpg'

Is there a folder that I need to set up for uploads once I run the build for react. Just now I just have an uploads folder at the root of the project.

Thanks for any advise


Solution

  • Looks like I wasn't restarting pm2 so it wasn't displaying any changes I was making to the express files.