I am trying to upload a file and send it to the backend API in saga worker but for some reason, the file is not getting fetched at the API side.
Invalid boundary in multipart: None
is the error (https://i.stack.imgur.com/dwkPR.png)
Through POSTMAN, able to get the files and it's working fine. all the uploaded files are captured in fileList and I am capturing only the first file by doing action.data.uploading.fileList[0]
Please suggest where I am doing wrong.
React component
const Ticket = () => {
const [isModalVisible, setIsModalVisible] = useState(false);
const dispatch = useDispatch();
const onFinish = (values) => {
console.log(values)
console.log(values['uploading']['fileList'])
dispatch(getUser(values));
};
return (
<React.Fragment>
<div className="top-section">
asd
<Button type="primary" style={{ float: 'right' }} onClick={()=>setIsModalVisible(true)}>Create Test Suite</Button>
<Modal title="Create" visible={isModalVisible} footer={null} onCancel={()=>setIsModalVisible(false)}>
<Form layout="vertical" onFinish={onFinish}>
<Form.Item label="Upload" name="uploading">
<Upload>
<Button icon={<UploadOutlined />}>Click to Upload</Button>
</Upload>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
</Modal>
</div>
</React.Fragment>
)
}
Saga Code
function* handleGetUser(action) {
try {
debugger
var formdata = new FormData();
formdata.append("file_name", action.data.uploading.fileList[0]);
const customer_fetch = yield call(fetch,
'http://localhost:8000/api',
{
method: "POST",
headers: {'Content-Type' : 'multipart/form-data',},
body : formdata
});
} catch (error) {
console.log(error);
}
}
Top comments (0)