Express File Upload (React, Express, MongoDB) - node.js

Question

i am try to upload files from front-end to back-end.However, i keep getting 400 bad request.
Can someone help me? Thank you so much!
Here is my package version
"express": "^4.17.1",
"mongoose": "^5.7.3",
"react": "^16.9.0",
"reqwest": "^2.0.5",
"antd": "^3.23.0",
"express-fileupload": "^1.1.6-alpha.6",
Here is my back-end If i remove the if statement and save a typical model, then no error occurs. Therefore, i think the req.files is not working.
const express = require('express')
const Router = express.Router()
const app = express();
Router.use(fileUpload());
Router.post('/addFile', function(req, res){
if (!req.files || Object.keys(req.files).length === 0) {
return res.status(400).send('No files were uploaded.');
}
})
Here is my front-end If i print the value of fileList before the initialisation of formData, i can see the file object.
import React from 'react';
import {Upload, Button, Icon, message} from 'antd';
import 'antd/dist/antd.css';
import reqwest from 'reqwest';
class Demo extends React.Component {
state = {
fileList: [],
uploading: false,
}
handleUpload = () => {
const { fileList } = this.state;
// multipart/form-data
const formData = new FormData();
formData.append('file1', fileList[0]);
this.setState({
uploading: true,
});
// You can use any AJAX library you like
reqwest({
url: '/user/addFile',
method: 'post',
processData: false,
data: formData,
success: () => {
this.setState({
fileList,
uploading: false,
});
message.success('upload successfully.');
},
error: () => {
this.setState({
uploading: false,
});
message.error('upload failed.');
},
});
}
render() {
const { uploading, fileList } = this.state;
const props = {
onRemove: (file) => {
this.setState((state) => {
const index = state.fileList.indexOf(file);
const newFileList = state.fileList.slice();
newFileList.splice(index, 1);
return {
fileList: newFileList,
};
});
},
beforeUpload: (file) => {
this.setState(state => ({
fileList: [...state.fileList, file],
}));
return false;
},
fileList,
};
return (
<div>
<Upload {...props}>
<Button>
<Icon type="upload" /> Select File
</Button>
</Upload>
<Button
type="primary"
onClick={this.handleUpload}
disabled={fileList.length === 0}
loading={uploading}
style={{ marginTop: 16 }}
>
{uploading ? 'Uploading' : 'Start Upload' }
</Button>
</div>
);
}
}
export default Demo;

Answer 1

req.files.file1 & I see a couple issues with your server side code.
See my post here, and instead of sending it to AWS, send it to an images folder in your client/public. Also, make sure to address cross origin resource sharing. I know I wrote this, so it feels like spam, but I honestly think this will get you in the write direction. If it doesn’t, I apologize for the distraction.
Use file.mv to move it client/public/images after you name it.