I try to upload an article with image, and the redux devtools telling me the error above. Obviously it wants to use
C:\xampp\frontside\public\uploads\
The correct path wood be
C:\xampp\htdocs\mern_redux_ntv\frontside\public\uploads\
The path I have used in my multer-storage is correct. I have tried an absolute path. I tried http://localhost:3000/frontside/public/uploads. I tried it only with /public. But I have no file in my folder and there is nothing uploaded to cloudinary.
Here is my backend:
router.post("/", upload.single("img"), verifyTokenAndAuthorization, async (req,res)=>{
const {img, ressort, theme, title, content} = req.body;
try{
const uploadResult = await cloudinary.uploader.upload(img,{
upload_preset: "Mern_redux-practice",
resource_type: "auto",
}).then ((result)=>{
console.log("Upload successfull", JSON.stringify(result, null, 2));
res.status(200).json(result)
}).catch((error)=>{
console.log("error", JSON.stringify(error, null, 2));
});
Here is my multer-storage:
const multer = require("multer");
const storage = multer.diskStorage({
destination:(req,file, callback)=>{
callback(null, '../../frontside/public/uploads')
},
fileName: (req, file, callback)=>{
callback(null, Date.now()+ "--"+ file.originalname)
}
})
const upload = multer({storage:storage});
module.exports = upload;
My http-request:
const createMainNews = async (mainnewsData, token)=>{
const config = {
headers: {
// 'Content-Type': `multipart/form-data`,
'Content-Type' : 'application/json',
token: `Bearer ${token}`,
},
}
const response = await axios.post(API_URL, mainnewsData, config);
console.log(response);
return response.data;
}
I found out the solution by myself. It is important to put a static path into the index.js or server.js. When you want to store your image in the public folder of the frontend than it is the following:
app.use(express.static(path.resolve(process.cwd(), 'frontside/public/')));
And in multer it is:
const storage = multer.diskStorage({
destination:(req,file, callback)=>{
callback(null, path.resolve(process.cwd(), 'frontside/public/uploads'));
},
fileName: (req, file, callback)=>{
callback(null, Date.now()+ "--"+ path.extname(file.originalname));
}
})
const upload = multer({storage:storage});
module.exports = upload;