React Code for file upload:
onChangeHandler=event=>{
this.setState({
selectedFile: event.target.files[0],
loaded: 0,
})
console.log(event.target.files[0])
}
onClickHandler = () => {
const data = new FormData()
data.append('file', this.state.selectedFile)
console.log(this.state.selectedFile)
axios.post(`${config.server}/upload`, data,{})
.then(res => { // then print response status
console.log(res.statusText)
});
}
<div>
<input type="file" name="file" onChange={this.onChangeHandler}/>
<button type="button" class="btn btn-success btn-block" onClick={this.onClickHandler}>Upload</button>
</div>
File Handling code of Node:
var multer=require("multer");
var cors = require('cors');
app.use(cors())
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'public')
},
filename: function (req, file, cb) {
cb(null, Date.now() + '-' +file.originalname )
}
})
var upload = multer({ storage: storage }).single('file')
app.post('/upload',function(req, res) {
console.log(req.file)
upload(req, res, function (err) {
if (err instanceof multer.MulterError) {
return res.status(500).json(err)
} else if (err) {
return res.status(500).json(err)
}
return res.status(200).send(req.file)
})
});
The onChangehandler is showing the file in react on console.log() but on submitting the data using the button Upload which uses the onClickHandler function. The response I get from the server is 500 and the directory with the name public where it should store the file is not getting created. What is going wrong if someone can help me. I am new to file handling in react and node. I am using the following link as reference. It is not necessary to store the file. All I need to do is process the file and read the contents inside the file. If there is some other way of doing instead of storing it.
Thanks for your help.
<form enctype="multipart/form-data">- SUDHIR KUMAR