Multer req.file is always undefined despite file object created - reactjs

Question

I read all the questions related to this already and nothing works. I spent the entire day on this and I can't figure out what's wrong.
I am trying to upload a file to my database using React, mongoose, mongoDB and express/node.
Here is what I already did:
Added method="post" and enctype="multipart/form-data" to my form
the "name" property of the file input is "icon" and in the middleware upload.single("icon") too.
On submit I have a function action that is called.
export const updateUserIconette = icon => async dispatch => {
console.log("Number 1");
console.log(icon);
try {
const res = await axios.post("/me", icon);
dispatch({
type: UPDATE_PROFILE_SUCCESS,
payload: res.data
});
} catch (err) {
const errors = err.response.data.errors;
if (errors) {
errors.forEach(error => dispatch(setAlert(error.msg, "danger")));
}
dispatch({
type: UPDATE_PROFILE_ERROR
});
}
};
Here, the console.log number 1 logs and the log of icon too, which is a file object.
And the API Post route is here:
const multer = require("multer");
const storage = multer.diskStorage({
destination: function(req, file, callback) {
callback(null, "./uploads/");
},
filename: function(req, file, callback) {
callback(null, file.originalname);
}
});
const fileFilter = (req, file, callback) => {
if (file.mimetype === "image/jpeg" || file.mimetype === "image/png") {
callback(null, true);
} else {
callback(null, false);
}
};
const upload = multer({ storage: storage, fileFilter: fileFilter });
router.post(
"/",
[
auth,
upload.single("icon")
],
async (req, res) => {
console.log("number 2")
console.log(req.file)
// Build the Profile object
const profileFields = {};
profileFields.user = req.user.id;
if (req.body.username) profileFields.username = req.body.username;
if (req.body.bio) profileFields.bio = req.body.bio;
if (req.body.location) profileFields.location = req.body.location;
if (req.file) profileFields.icon = req.file.path;
try {
let user = await User.findOne({ _id: req.user.id });
if (user) {
//Update
user = await User.findOneAndUpdate(
{ _id: req.user.id },
{ $set: profileFields },
{ new: true }
);
return res.json(user);
}
await user.save();
res.json(user);
} catch (err) {
console.error(err.message);
res.status(500).send("Server Error");
}
}
);
Here, the console.log number 2 logs but not the req.file because it is empty.

Answer 1

Alright, here's a working demo using react, multer, express, mongodb and mongoose. It's not fancy, pretty much bare bones, but it works. What you should do is step through your project and make sure each file/function/middleware works as intended in the flow (see flow example below).
Github repo: https://github.com/mattcarlotta/upload-image-example
Follow the README for instructions on how to run it.
All important files will have notes as to what their function does.
Files to focus on:
client-side form (specifically sending FormData here)
multer middleware
upload icon route
saveIcon middleware
createIcon controller
Flow:
User adds a file (image) and an email address and clicks Submit to send a POST request to the API.
The POST request first passes through the multer middleware.
If valid, then the request is handled via the upload icon route.
The route passes it to the saveIcon middleware.
The saveIcon middleware saves the image to uploads then passes the request to the createIcon controller.
The controller saves the email and icon filepath to the mongodb database, and then sends back a response (message and remoteicon) to the client-side form.
The client-side form receives a res (response) from the API and sets it to state.
When the state is updated, the remoteicon is set as a src to an img element, which in turn, makes a GET request back to the API, which in turns sends back the uploaded image.
Ideally, most of this flow will be a microservice (and not attached to your main application), as it will vastly simplify your structure. More info can be found here.