how to send images through axios using gridfs? - reactjs

Question

how can i send a file/image in reactjs uploaded through an to the backend, using axios?
the simple input form is this :
<form className={classes.form} onSubmit={handleSubmit(submitFunc)}>
<Grid container spacing={2}>
<Grid item xs={12}>
<input
type="file"
accept="image/*"
alt="file"
name="file"
id="file"
/>
</Grid>
</Grid>
<Button
type="submit"
>
Add
</Button>
</form>
the submit function:
try {
await axios
.post(`http://localhost:5000/addPic`, data, {
headers: {
accept: "application/json",
"Accept-Language": "en-US,en;q=0.8",
"Content-Type": `multipart/form-data`,
},
})
}
);
} catch (error) {
console.log("error");
}
i tried this but it's not working, and i dont know why, because when i use postman to send an image to the same api, it works :
also when i use a view engine and use a form with method="POST" in the backend, it works!
here's the api code :
const conn = mongoose.createConnection(mongoURI);
let gfs;
conn.once("open", () => {
// Init stream
gfs = Grid(conn.db, mongoose.mongo);
gfs.collection("uploads");
});
let tempNameFile;
const storage = new GridFsStorage({
url: mongoURI,
file: (req, file) => {
return new Promise((resolve, reject) => {
crypto.randomBytes(16, (err, buf) => {
if (err) {
return reject(err);
}
const filename = buf.toString("hex") + path.extname(file.originalname);
const fileInfo = {
filename: filename,
bucketName: "uploads",
};
tempNameFile = filename;
console.log(tempNameFile);
resolve(fileInfo);
});
});
},
});
const upload = multer({ storage });
router.post("/", upload.single("file"), async (req, res) => {
console.log(tempNameFile);
res.send("good to go");
});
to sum up all of this, my question is how can i upload an image to the frontend using a simple input and send it through axios, the same way postman sends an image to the backend to be handled by gridfs and stored in the mongodb database

Answer 1

Since Postman worked, your backend is setup properly. Now on to your frontend.
Axios handles multipart form data if your data is an instance of FormData.
In your component you can set a state variable to hold the selected file
const [selectedFile, setSelectedFile] = useState(null);
Add an onInput to your <input /> field like so:
<input onInput={e => setSelectedFile(e.target.files[0])} />
In the submit function, wrap the file in a FormData and submit with Axios
try {
const data = new FormData();
data.append("file", selectedFile);
await axios.post(`http://localhost:5000/addPic`, data);
/* Do something if upload was successful */
} catch (error) {
console.log("error");
}