How I upload an image file from a form in React to an Express api? - node.js

Question

I try to modify an user profile Image, but my file seems to not arrive in my backend.
I was able to do so with Postman, but not with my frontend.
I use Express with Mongoose and MongoDB for backend. In frontend I use React, js, Redux and Axios.
In my schema, the profile Image is like this:
profileImg: {
data: Buffer,
contentType: String
}
Later, I use the buffer to make the link for image in frontend.
For working with files, I use Multer. This is what I use for my middleware:
const multer = require('multer');
const fileFilter = (req, file, cb) => {
// reject a file
if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
cb(null, true)
} else {
cb(null, false)
}
}
const storage = (location) => multer.diskStorage({
destination: function(req, file, cb) {
cb(null, `./uploads/${location}`);
},
filename: function(req, file, cb) {
cb(null, new Date().toISOString().replace(/:/g, '-') + file.originalname)
}
})
const uploadImg = (location) => multer({
storage: storage(location),
limits: {
fileSize: 1024 * 1024 * 5
},
fileFilter: fileFilter
})
module.exports = uploadImg
This is where I make the update of the user in backend. You can change the name if you comment the section for profileImg section inside updatedUser.
In profileImg I have 2 data lines:
The commented one is what I tried for my file object
The active one is working for image files that are sent with Postman
const updatedUser = await User.findByIdAndUpdate(
req.user.id,
{
name: req.body.name,
profileImg: {
data: fs.readFileSync("uploads/profile/" + req.file.filename),
//data: fs.readFileSync("uploads/profile" + req.body.profileImg.name)
contentType: "image/jpeg",
},
},
{ new: true }
);
res
.status(200)
.json({
_id: updatedUser.id,
name: updatedUser.name,
email: updatedUser.email,
profileImg: updatedUser.profileImg,
token: generateToken(updatedUser._id),
// body: req.body,
// file: req.file
});
});
In frontend I save the changes of the inputs in a variable called changedUser and it looks like this:
const handleChange = (e) => {
if (e.target.name === "profileImg") {
// changeuser({ ...userChanged, [e.target.name]: fileUploadHandler(e.target.id) });
changeuser({ ...userChanged [e.target.name]:document.getElementById('profileImg').files[0]});
} else {
changeuser({ ...userChanged, [e.target.name]: e.target.value });
}
};
This is my submit function (I use dispatch because my project is using redux):
const handleSubmit = (e) => {
e.preventDefault();
initialData.name = userChanged.name;
initialData.address = userChanged.address;
initialData.profileImg = userChanged.profileImg
dispatch(update(userChanged))
changeVisibility("hidden-buttons");
};
I'll also put here the form with the section in which is found the file input
<Container fluid className="body-loginPage">
<form onSubmit={handleSubmit} id="formElem" encType="multipart/form-data">
<Row className="custom-row mb-5">
<Col xs={6} className="custom-column">
{/* <img src={`${profile_pic}`}></img> */}
<Image
thumbnail
rounded
src={`data:image/png;base64,${base64_String()}`}
/>
</Col>
</Row>
<Row className="m-1 custom-row mb-3">
<Col xs={3}>
<div>Nume: </div>
</Col>
<Col xs={7}>
<input
name="name"
value={userChanged.name}
onChange={handleChange}
/>
</Col>
</Row>
<Row className="m-1 custom-row mb-3">
<Col xs={3}>
<div>Email: </div>
</Col>
<Col xs={7}>
<input
disabled
name="address"
value={email}
onChange={handleChange}
/>
</Col>
</Row>
<Row className="m-1 custom-row mb-3">
<Col xs={3}>
<div>Change picture: </div>
</Col>
<Col xs={7}>
<input
id="profileImg"
type="file"
name="profileImg"
//value={userChanged.picture !== [] ? userChanged.picture : ""}
ref={inputRef}
onChange={handleChange}
/>
{/* <input type="file" onChange={fileSelectedHandler} /> */}
</Col>
</Row>
<Row className="m-1 custom-row">
<Col xs={3}>
<div>Telefon: </div>
</Col>
<Col xs={7}>
<input
name="phone"
value={userChanged.phone}
onChange={handleChange}
/>
</Col>
</Row>
<Row className="m-1 custom-row">
<Col xs={6} />
<Col xs={2}>
<Button
variant="danger"
onClick={cancelEdit}
className={`${visible}`}
>
Cancel
</Button>
</Col>
<Col xs={3}>
<Button
variant="success"
className={visible}
type="submit"
>
Actualizeaza
</Button>
</Col>
</Row>
</form>
<button onClick={getInfo}>click</button>
</Container>
I've tried many variants. I had success using Postman, but I can't reproduce the same result from my project. I am not very experienced with forms and maybe this is where my problem is. I also tried formData for my first time and it didn't work very well.
I am opened to make changes in backend if necessary. I am struggling with this problem for 2 days, any help is appreciated.
If my question is unclear, please ask me for more details. I am quite new here, on stackoverflow.