Uploading images from react to express - node.js

Question

I'm facing a problem while uploading images from react state to express.
I'm getting empty array in my express route while sending images. But texts are sent and received in backend with no problem. The problem is that images are not sent to the backend.
This is my React code:
import React, { Component } from 'react'
import ImageUploader from 'react-images-upload'
import API from '../../../../api'
export default class AddCategory extends Component {
constructor(props) {
super(props);
this.state = {
formData: {
name_uz: '',
name_ru: '',
name_en: ''
},
pictures: [],
response: false,
loading: false,
responseText: '',
responseResult: false
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.clearForm = this.clearForm.bind(this);
this.onDrop = this.onDrop.bind(this);
}
onDrop(picture) {
this.setState({
pictures: this.state.pictures.concat(picture),
});
}
handleChange = e => {
let state = (this.state);
let a = state.formData;
a[e.target.name] = e.target.value;
this.setState({formData: a});
}
handleSubmit = e => {
e.preventDefault()
this.setState({ loading: true })
const texts = this.state.formData
const pictures = this.state.pictures
console.log(pictures)
const postData = {texts, pictures}
API.post(`/content/category/new`, {postData})
.then(res => {
this.setState({ responseText: res.data.text })
res.data.status ? this.setState({ loading: false, responseResult: true, response: true }) : this.setState({ loading: false, responseResult: false, response: true })
this.clearForm()
setTimeout(function () {
this.setState({response: false});
}.bind(this), 6900)
})
}
render() {
return (
<div className='content-manager-section'>
<Form onSubmit={this.handleSubmit}>
<ImageUploader
withIcon={true}
buttonText='Выберите изображения'
onChange={this.onDrop}
imgExtension={['.jpg']}
maxFileSize={5242880}
label='Максимальный размер изображения: 2 Мб, Тип изображения: .jpg'
fileSizeError='Файл слишком большой файл'
fileTypeError='Недопустимый тип файла'
singleImage={true}
/>
<input onChange={this.handleChange} value={this.state.formData.name_uz} maxLength='50' name='name_uz' placeholder='Название' />
<input onChange={this.handleChange} value={this.state.formData.name_ru} maxLength='50' name='name_ru' placeholder='Название' />
<input onChange={this.handleChange} value={this.state.formData.name_en} maxLength='50' name='name_en' placeholder='Название' />
<Button className={this.state.loading ? 'loading submit-btn' : 'submit-btn'} type='submit'><i className='lnil lnil-cloud-upload'></i>Добавить</Button>
</Form>
</div>
)
}
}
This is my Express code:
const uuidv4 = require('uuid')
const multer = require("multer")
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, DIR);
},
filename: (req, file, cb) => {
const fileName = file.originalname.toLowerCase().split(' ').join('-');
cb(null, uuidv4() + '-' + fileName)
}
});
var upload = multer({
storage: storage,
fileFilter: (req, file, cb) => {
if (file.mimetype == "image/png" || file.mimetype == "image/jpg" || file.mimetype == "image/jpeg") {
cb(null, true);
} else {
cb(null, false);
return cb(new Error('Only .png, .jpg and .jpeg format allowed!'));
}
}
});
.post('/new', upload.single('image'), (req, res) => {
console.log(req.body)
console.log(req.files)
})
This is what Express is logging in console
{
postData: {
texts: { name_uz: '', name_ru: '', name_en: '' },
pictures: [ {} ]
}
}
undefined
Please, let me know my wrong steps.
Edit
It seems that square brackets [ ] inside state has some strange behaviour. Everytime I use [ ] inside state and try to post it, the sent array is empty.

Answer 1

I've solved it myself. I had to use the FormData interface for sending files.
In case if someone needs it, here is the documentation.
And in Express I've used multer fields for receiving pictures and texts.
Example from my React code that works:
const formData = new FormData();
for (var i = 0; i < this.state.pictures.length; i++) {
formData.append('categorypic', this.state.pictures[i])
}
formData.append('texts', JSON.stringify(this.state.formTexts))
axios.post('your_url_here', formData)
.then(res => {
})