I'm using axios to post a form(includes file) using FormData to the backened in react but the request data is empty at backened.
Note : formData is not empty in payload of Chrome browser.
App.js
const App = ({data, id}) => { const [temperoryLink, setTemperorylink] = useState(''); const [assignment, setAssignment] = useState(''); const handleFileUpload = (e) => { const linkObject = e.target.files[0]; const temperoryLink = URL.createObjectURL(linkObject); setTemperorylink(temperoryLink); setAssignment(linkObject); }; const handleSubmit = async (e) => { e.preventDefault(); try { const formData = new FormData(); formData.append('file', assignment); formData.append('ta_id', data.assigned_TA); formData.append('assignmentId', id); const response = await SubmitAssignmentApi(formData); } catch (err) { console.log(err); } } return ( <div> <label className="btn"> <input type="file" name="file" style={{ display: 'none' }} onChange={handleFileUpload} required />{' '} Upload file </label> <button type="submit" className="btn bg-red-five" onClick={handleSubmit}> Submit </button> </div> ) } submit.js
export async function SubmitAssignmentApi(formData) { try { const config = { headers: { 'Content-Type': 'multipart/form-data', Authorization: `Bearer ${token}` } }; const response = await axios.post('http://localhost:5000/api/v1/submission/', formData, config); return response.data; } catch (err) { console.log(err); } } Below code is a backened code where request is send from client to server backened.js
const SubmitAssignment = require('../../../../controller/api/v1/assignment/submission'); router.post('/', [ body('assignmentId').not().isEmpty().withMessage('Assignment ID is required'), body('ta_id').not().isEmpty().withMessage('Teaching Assistant Id is required'), ], authenticateUserToken, SubmitAssignment.submit); const upload = multer({ dest: 'uploads/' }); exports.submit = async(req, res) => { try { // validate client input data upload.single('file'); console.log(req.body); console.log(req.file); const error = validationResult(req); if (!error.isEmpty()) { return res.status(422).json({ type: 'warining', message: error.array()[0].msg, }); } } catch (err) { console.log(err); return res.status(500).json({ success: false, message: 'Server Error', }); } }; any suggestions would be appreciated.
