multiple image uploading nodejs reactjs multer - mysql

Question

I'm trying to make a upload image feature in my website. I've worked on uploading a single image and it worked how do I change my code to make it upload multiple images at same time code below:
Server Side:
// img storage confing
var imgconfig = multer.diskStorage({
destination: (req, file, callback) => {
callback(null, "./uploads");
},
filename: (req, file, callback) => {
callback(null, `image-${Date.now()}.${file.originalname}`)
}
});
// img filter
const isImage = (req, file, callback) => {
if (file.mimetype.startsWith("image")) {
callback(null, true)
} else {
callback(null, Error("only image is allowd"))
}
}
var upload = multer({
storage: imgconfig,
fileFilter: isImage
})
// register userdata
app.post("/insertImage", upload.single("photo"), (req, res) => {
const { filename } = req.file;
console.log(req.file)
});
Client Side:
const [file, setFile] = useState("");
const setimgfile = (e) => {
setFile(e.target.files[0])
}
const addUserData = async (e) => {
e.preventDefault();
var formData = new FormData();
formData.append("photo", file)
const config = {
headers: {
"Content-Type": "multipart/form-data"
}
}
const res = await Axios.post("/insertImage", formData, config);
if (res.data.status == 201) {
console.log("NO error")
} else {
console.log("error")
}
}
REACT JSX
Here is my input file and multiple is added here
What should i do?? Please help me
<div style={{ padding: 15, backgroundColor: '#fff', marginTop: 15 }}>
<h4>Upload file:</h4>
<input type="file" name='photo' onChange={setimgfile} multiple/>
<button onClick={addUserData}>submit</button>
</div>

Answer 1

UI:
const [files, setFile] = useState("");
const setimgfile = (e) => {
setFile(e.target.files)
}
const addUserData = async (e) => {
e.preventDefault();
var formData = new FormData();
for (const file of files) {
formData.append('files', file)
}
const config = {
headers: {
"Content-Type": "multipart/form-data"
}
}
const res = await Axios.post("/insertImage", formData, config);
if (res.data.status == 201) {
console.log("NO error")
} else {
console.log("error")
}
}
<div style={{ padding: 15, backgroundColor: '#fff', marginTop: 15 }}>
<h4>Upload file:</h4>
<input type="file" name='photo' onChange={setimgfile} multiple />
<button onClick={addUserData}>submit</button>
</div>
BACKEND:
import multer from 'multer';
const storage = multer.diskStorage({
destination: (req, file, cb) => {
// Uploaded files destination
cb(null, "uploads/");
},
filename: (req, file, cb) => {
const newFilename = `${new Date().getDate()}-${new Date().getMonth() + 1}-${new Date().getFullYear()}-${file.originalname}`;
cb(null, newFilename);
}
});
const upload = multer({ storage }).array('files');
app.post("/insertImage", upload, (req, res) => {
console.log('success')
});