I'm relatively new to programming but I'll try to make this as concise as possible.
I'm using multer to try to upload an XML file. I have a Node Express server and am using React with .jsx as well. After uploading I'll be parsing that file data and posting that to a Postgres database. So with that in mind I'm not writing the uploaded file to disk, I'm just storing it in memory using multer's buffer property before parsing.
I got multer working in a small test project using jQuery for form submission but I'm not using jQuery here and I'm not sure how form submission really works in React, or if that's even the issue. I'm only including the code that directly relates to using multer. Everything else is working fine.
Here's my form:
<form
id="uploadForm"
ref="form"
encType="multipart/form-data"
method="post"
action="/upload"
onSubmit={this.handleSubmit}
>
<input
type="file"
name="songlist"
/>
<input
type="submit"
value="UploadFile"
name="submit"
/>
</form>
handleSubmit(event) {
console.log('hey');
event.preventDefault();
this.props.postSongs();
},
postSongs() {
axios.post("/upload")
.then(() => {
console.log('success')
})
.catch((err) => {
console.error(err);
});
},
const multer = require('multer');
const upload = multer({inMemory: true});
router.post('/upload', upload.single('songlist'), (req, res, next) => {
console.log(req.file);
knex('songs')
.where('admin_id', adminId)
.first()
.then((songs) => {
console.log(songs);
})
.catch((err) => {
next(err);
});
});
upload.single('songlist')
You're not posting the form, you're posting an empty body. Try this instead:
var formData = new FormData(document.getElementById('uploadForm'));
axios.post('upload', formData)
.then(() => {
console.log('success');
})
.catch((err) => {
console.error(err);
});