Form in frontend React.js.
const handleUpload = (e) => {
setFormvalue({ ...formvalue, recevierImages: e.target.files[0] });
};
const submitData = () => {
console.log(formvalue);
dispatch(createDonation(getFormData(formvalue)));
};
<Form>
<Form.Item name="donationImage" label="Upload Image">
<input type="file" onChange={(e) => handleUpload(e)} />
</Form.Item>
</Form>
<Button onClick={submitData} type="primary">
Create
</Button>
recevierImages is the name were image is stored in react and on click of submitData all the data is appended to FormData and send to express js
api in backend express.js
const express = require("express");
const multer = require("multer");
const donationController = require("../controller/donationController");
const router = express.Router();
const multerStorage = multer.diskStorage({
destination: function (req, file, callBack) {
callBack(null, "");
},
});
const uploadImage = multer({ storage: multerStorage }).single("recevierImages");
router.post("/create", uploadImage, donationController.createDonation);
router.patch("/update", donationController.updateDonation);
module.exports = router;
donationController.js
const createDonation = async (req, res) => {
try {
console.log(req.file.buffer);
} catch (error) {
console.log(error);
res.status(500).send(error);
}
}
module.exports = {
createDonation,
};
In donationController.js req.file.buffer is undefined