I tried to upload a csv file from React.js to backend express, but at the front end when I clicked the "Save" button, there's no response. From the network of the inspection of the Chrome browser, nothing happen. Can someone help? Below is my frontend and backend code.
Frontend (React.js)
const AddCreditCardStmnt = () => {
const [bankName, setBankname] = useState("");
const [creditCardNo, setCreditcardno] = useState("");
const [selectedFile, setSelectedFile] = useState("")
const [statement, setStatement] = useState("");
const navigate = useNavigate();
const changeHandler =(e) => {
setSelectedFile(true)
setStatement(e.target.files[0])
// setIsSelected(true)
}
const saveStmnt = async (e) => {
e.preventDefault();
const formData = new FormData();
formData.append('bankName', bankName)
formData.append('creditCardNo', creditCardNo)
formData.append('file', e.target.files[0])
try {
await axios.post("http://localhost:3001/statements", formData, {
headers: {
'Content-Type': 'application/json'
}
});
navigate("/");
} catch (error) {
console.log(error);
}
};
return (
<div className="columns mt-5">
<div className="column is-half">
<form onSubmit={saveStmnt}>
<div className="field">
<label className="label">Bank Name</label>
<div className="control">
<div className="select is-fullwidth">
<select value={bankName} onChange={(e) =>setBankname(e.target.value)}>
<option value="citi">Citi</option>
<option value="americanexpress">American Express</option>
<option value="wellsfargo">Wells Fargo</option>
<option value=""></option>
</select>
</div>
</div>
<div className="field">
<label className="label">Credit Card Number</label>
<div className="control">
<input
type="text"
className="input"
value={creditCardNo}
onChange={(e) => setCreditcardno(e.target.value)}
placeholder="Email"/>
</div>
</div>
<div className="field">
<label className="label">Statement</label>
<div className="control">
<input
type="file"
className="input"
onChange={changeHandler}
placeholder="Bank Name"
/>
</div>
</div>
</div>
<div className="field">
<div className="control">
<button type="submit" className="button is-success">
Save
</button>
</div>
</div>
</form>
</div>
</div>
);
};
Backend (express)
export const saveStmnt = async (req,res) => {
const multer = require('multer')
const storage = multer.diskStorage( {
destination: (req, file, callBack) => {
callBack(null, 'uploads')
},
filename: (req, file, callBack) => {
callBack(null, `${file.originalname}`)
}
})
let upload = multer({dest: '../data/uploads/'})
const server=express();
server.post('statements', upload.single('file'), (req, res, next) => {
const file = req.file;
console.log(file.filename);
if (!file) {
const error = new Error('No File')
error.httpStatusCode = 400
return next(error)
}
res.send(file);
})