DEV Community

Sai Avinash Duddupudi
Sai Avinash Duddupudi

Posted on

saga fetch || Invalid boundary in multipart during uploading files

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
Enter fullscreen mode Exit fullscreen mode

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>
          )
    }
Enter fullscreen mode Exit fullscreen mode

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);
        }
    }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)