I am trying to pass image to mongodb like below.
const [imgfile, setFile] = useState();
const [fileName, setFileName] = useState("");
const saveFile = (e) => {
console.log(typeof( e.target.files[0]));
setFile(e.target.files[0]);
setFileName(e.target.files[0].name);
//formData.append("myImage",e.target.files[0]);
//formData.append("fileName", e.target.files[0].name);
};
const uploadFile = async (e) => {
var formData=new FormData();
formData.append("file",imgfile);
formData.append("fileName", fileName);
console.log(formData);
try {
const res = await axios.post(
"/setting",
formData
);
console.log(res);
} catch (ex) {
console.log(ex);
}
};
return (
<div className="center">
<section>
<h1>setting</h1>
<br />
<input type="file" name="myImage" onChange={saveFile} />
<button onClick={uploadFile}>Upload</button>
</div>);
I don't know why the formData would become "{}" after the formData.append. and It seems that nothing can be passed