Issue
This Content is from Stack Overflow. Question asked by John Oliver
I want to upload an image in the from React.js but it is not working.
The fileUploadHandler:
const uploadFileHandler = async (e) => {
const file = e.target.files[0];
let formData = new FormData();
formData.append("image", file);
setUploading(true);
try {
const config = {
headers: {
"Content-Type": "multipart/form-data",
},
};
const { data } = await axios.post(
"http://localhost:5000/api/upload",
formData,
config
);
setImage(data);
setUploading(false);
} catch (error) {
setUploading(false);
}
};
If I log the formData
in the try block then it does not logs anything so is the data
field and logs the error as below:
The multer configuration:
const storage = multer.diskStorage({
destination(req, file, cb) {
cb(null, "uploads/");
},
filename(req, file, cb) {
cb(
null,
`${file.fieldname}-${Date.now()}${path.extname(file.originalname)}`
);
},
});
function checkFileType(file, cb) {
const fileTypes = /jpg|jpeg|png/;
const extName = fileTypes.test(path.extname(file.originalname).toLowerCase());
const mimeType = fileTypes.test(file.mimeType);
if (extName && mimeType) {
return cb(null, true);
} else {
cb("Images Only!!");
}
}
const upload = multer({
storage,
fileFilter: function (req, file, cb) {
checkFileType(file, cb);
},
});
router.post("/", upload.single("image"), (req, res) => {
return res.send(`/${req.file.path}`);
});
The upload route in server.js file:
app.use("/api/upload", uploadRoutes);
Everything is fine in the backend but still getting the error.
Solution
I think the problem is your axios call :
try {
let result = await axios.post( // any call like get
"http://localhost:3000/image", // your URL
{ // data if post, put
data: data,
},{
headers:config,
}
);
console.log(result.response.data);
} catch (error) {
console.error(error.response.data);
}
try to call axios like this.
This Question was asked in StackOverflow by John Oliver and Answered by Mahmudul Hasan It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.