Handling uploads multiple images from react js - node.js

Question

Good Morning, i got a problem about some codes, fyi im still new to react js, i try to uploads multiple images from react to express and save it to mongoDB
, i already re-search that i need to use multer in my node js, but i dont know the argument need to pass because in react i have 1 name of field of files to upload, but on my submit data has 2 data to send.
handleSubmit(e){
e.preventDefault();
// var formData = new FormData();
// formData.append('file', e.target.value)
// formData.append('file2', e.target.value)
let {imagePreviewUrl} = this.state;
const dataCategory = this.state.dataCategory;
let categoryName = this.refs.categoryName.value;
let categoryImage = this.refs.categoryImage.value;
let categoryDesc = this.refs.categoryDesc.value,
categoryImageCabor = (<img alt="www.google.com" height="100px" src={imagePreviewUrl} />),
namaCabor = this.refs.namaCabor.value,
descCabor = this.refs.descCabor.value,
imageCabor = (<img height="100px" src={this.state.imageCabor.props.src} />)
fetch('http://localhost:4000/add', {
mode:'cors',
method:'post',
headers:{
'Content-Type' : 'application/json',
// "Accept" : "application/json",
// "type" : "formData"
},
body:JSON.stringify({
categoryName : categoryName,
categoryDesc : categoryDesc,
categoryImage: categoryImage,
categoryImageCabor : categoryImageCabor,
namaCabor : namaCabor,
descCabor : descCabor,
imageCabor : imageCabor,
status : true
}),
}).then(res=>{
return res.json();
}).catch(function(err){
if(err){
console.log(err);
}
})
this.setState({
dataCategory : dataCategory,
imagePreviewUrl : false,
});
this.refs.myForm.reset();
this.refs.myForm.focus();
}
handleChange(e){
this.setState({
[e.target.categoryName] : e.target.value,
[e.target.categoryImage] : e.target.value,
[e.target.categoryDesc] : e.target.value
})
}
render(){
let {imagePreviewUrl} = this.state;
let $imagePreview = null;
if(imagePreviewUrl){
$imagePreview = (<img alt ="www.google.com" height="100px" src={imagePreviewUrl} />)
}
return this.state.imageCabor === "" ? <div></div> : (
<div>
<h3>Insert Category Cabang Olahraga </h3>
<form style={{marginTop: 10}} ref="myForm" onSubmit={this.handleSubmit} >
<div className="form-group">
<label>Nama Category</label>
<input
name="categoryName"
type="text"
className="form-control"
ref="categoryName"
onChange={this.handleChange}
/>
</div>
<div className="form-group">
<label>Deskripsi Category </label>
<textarea
name="categoryDesc"
type="text"
className="form-control"
ref="categoryDesc"
rows="5"
onChange={this.handleChange}
/>
</div>
<div className="form-group">
<label>Upload Icon Image</label> <br />
<div>{$imagePreview}</div>
<input
name="categoryImage"
type="file"
ref="categoryImage"
className="image-control"
onChange={this.imageHandleChange}
/>
</div>
<h1>Cabang Olahraga</h1>
<div className ="form-group">
<label>Nama Cabang Olahraga</label>
<input
name="namaCabor"
type="text"
className="form-control"
ref="namaCabor"
value={this.state.namaCabor}
/>
</div>
<div className ="form-group">
<label>Deskripsi Cabang Olahraga</label>
<textarea
name="descCabor"
type="text"
className="form-control"
ref="descCabor"
rows="5"
value={this.state.descCabor}
/>
</div>
<div className="form-group">
<label>Icon Cabang Olahraga</label> <br />
<div><img height="100px" src={this.state.imageCabor.props.src} /></div>
</div>
<div className="form-group">
<input type="submit" value="Apply" className ="btn btn-primary" />
</div>
</form>
</div>
);
}
//node js code
//i dont know the argument need to pass in here
app.post('/', upload.array('catagoryImage', 12), (req, res, next) =>{
const files = req.files;
if(!files){
const error = new Error('Please choose files')
error.httpStatusCode = 400
return next(err)
}
res.send(files);
}}

Answer 1

To send images along with data from frontend to backend, you need to wrap it inside FormData object like this:
let formData = new FormData();
formdata.append('keyName','value') //replace keyName with your key and value with its value.
And do not set any headers in your fetch request. This should do. Try it and let me know.
Hope it helps!!