How to upload a csv file from React.js front end to express backend?

Question

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);
})

Answer 1

Now, I can get through the frontend, but when it come to backend, the server.post doesn't work, the network status is pending infinitely.

At frontend, I use the following API url

await axios.post("http://localhost:3001/statements" 

At backend, I use the following to post

server.post('/statements', upload.single('file'), (req, res, next) => {
    const file = req.file;
    console.log(file.filename);
    if (!file) {....

am I use the right post for backend? It's go up to the point to server.post statement and pending there forever.

Thanks, Jo