Sending state and files with multer

Question

I want to send data with files in multer. From React app to node server so,

constructor(props){ super(props)

    this.state = {
        error:false,
        isProcessing:false,
        isPassed:false,
        isFaild:false,
        errorLine:'',
        data:'something'
    }

    this.handleChoose = this.handleChoose.bind(this)
}
handleChoose(e){
    const fd = new FormData()
    console.log(e.target.files)
    fd.append('file',e.target.files[0],e.target.files[0].name)
    fd = Object.assign({},fd,this.state)
    console.log(fd)
    axios.post(`/api/${this.state.area}`,fd)
                    .then((res)=>{
                        this.setState({"isPassed":true})
                    })
                    .catch((e)=>{
                        if(e){
                            console.log(e.response)
                            this.setState({'isProcessing':false,
                                                        'errorLine':e.response.data.error})
                        }
                    })
}                        

this is throwing me Error that fd is read only So i searched and found

    fd.append('file',e.target.files[0],e.target.files[0].name)
    fd.append('state',this.state)
    console.log(fd)
    axios.post(`/api/${this.state.area}`,fd)
                    .then((res)=>{
                        this.setState({"isPassed":true})
                    })
                    .catch((e)=>{
                        if(e){
                            console.log(e.response)
                            this.setState({'isProcessing':false,
                                                        'errorLine':e.response.data.error})
                        }
                    })

but when I print it on server by.

router.post('/somethin',upload,userVerifyMiddleWare,(reqs,resp)=>{
    console.log(reqs.body.state.data)
})

it show undefined as output. But I am getting reqs.files as required output.

const upload =multer({storage: multer.diskStorage({
    destination: function (req, file, callback) { callback(null, './temp/');},
    filename: function (req, file, callback) { callback(null, file.fieldname + '-' + Date.now()+'.csv');}})
}).single('file');

is multer object.

Answer 1

I have found a way to this. Actually I do not know the way to send object but to solve problem we can

fd.append('file',e.target.files[0],e.target.files[0].name)
fd.append('state-value-1',this.state.value1)
fd.append('state-value-2',this.state.value2)

and on server we can

console.log(req.body) // to get all non file values
console.log(req.file) // for file