PrimeReact FileUpload with Django and axios with redux

Question

I have my PrimeReact FileUpload component like this. FileUpload component is inside Formik

<FileUpload
                    mode="basic"
                    name="baptism_certificate"
                    accept="image/*"
                    maxFileSize={1000000}
                    customUpload
                    uploadHandler={onBasicUploadAuto}
                    chooseLabel="Browse"
/>

This is my onBasicUploadAuto method

const onBasicUploadAuto = ({ files }) => {
    const [file] = files;
    console.log(file);
    const fileReader = new FileReader();
    fileReader.onload = (e) => {
      dispatch(uploadParishionerBaptismCertificate(parishioner.id, e.target.result));
    };
    fileReader.readAsDataURL(file);
  };

This is my uploadParishionerBaptismCertificate method

export const uploadParishionerBaptismCertificate = (id:string, baptism_certificate:any) => async (dispatch:(func:any)=>void) => {
  dispatch(uploadParishionerBaptismCertificateStart());
  try {
    const formData = new FormData();
    formData.append('baptism_certificate', baptism_certificate);
    const path = `parishioners/${id}/upload-baptism-certificate/`;
    const response = await axios.post(path, formData, {
      headers: {
        'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW'
      }
    });
    console.log(response.data);
    dispatch(uploadParishionerBaptismCertificateSuccess(response.data.baptism_certificate));
  } catch (error) {
    let customError = '';
    Object.keys(error).forEach((key) => {
      console.log(key, error[key]);
      customError += `${key.toString()}: ${error[key].join(',').toString()}\n`;
    });
    dispatch(editParishionerFail(customError));
  }
};

When I upload the image I'm getting the below response from django

baptism_certificate > ["The submitted data was not a file. Check the encoding type on the form."]

What am I doing wrong? How can I upload a file with PrimeReact FileUpload component?

Answer 1

remove "name", "accept" and try from fileupload