Получение ошибки запроса при попытке отправить данные формы с вложением в DRF Backend из React Native Frontend

Я работаю над react native проектом, где мне нужно отправить форму "Request Financial Aid" на backend, Форма также состоит из файла (изображение или pdf), я использовал react native document picker для получения файла, затем я использовал file uri для получения blob.

Следующее, что я сделал, это отправил данные формы в бэкенд, однако мой бэкенд не получает все значения, которые я отправляю из фронтенда, что может быть причиной того, что я получаю Bad Request. Трассировка ошибки здесь

Мой бэкенд работает нормально, когда я отправляю данные из своего веб-приложения, поэтому я знаю, что проблема не в бэкенде.

Вот как я выбираю файл:

 const selectFile = async () => {
    // Opening Document Picker to select one file
    try {
      const res = await DocumentPicker.pickSingle({
        type: [DocumentPicker.types.allFiles],
      });
      console.log('res simple', res);
      console.log('res : ' + JSON.stringify(res));
      //fetch uri from the response
      const fileUri = res.uri;
      console.log('res : ' + fileUri);
      setSingleFile(res);

      // handleAcceptedFiles(res);
    } catch (err) {
      setSingleFile(null);
      if (DocumentPicker.isCancel(err)) {
        ToastAndroid.show('Canceled', ToastAndroid.SHORT);
      } else {
        alert('Unknown Error: ' + JSON.stringify(err));
        throw err;
      }
    }
  };

Вот как я получаю блоб, используя файл uri.

 useEffect(() => {
    if (singleFile != null) {
      getData();
    }
  }, [singleFile]);

  const getData = async () => {
    console.log('inside getData');
    // console.log("singleFile",singleFile)
    console.log('singlefile', singleFile.uri);
    await fetch(singleFile.uri)
      .then(response => {
        console.log('response', response.blob());
        // response.blob()

        setBlob(response.blob());
      })
      .catch(err => {
        console.log(err);
      });
  };

А вот как я отправляю данные в бэкенд при нажатии на кнопку upload:

const uploadData = async () => {
    console.log("uploading data");
    if (blob != null) {
      const fileToUpload = singleFile;
      console.log('blob', blob);
      const data = new FormData();
      // data.append('Attachment', fileToUpload);
      data.append('Attachment', blob);

      data.append('Address', address);
      data.append('CNIC', CNIC);
      data.append('Phone_Number', number);
      data.append('Status', 'Pending Response');
      data.append('Description', description);
      data.append('Appointment_id', 'b082564a-67f0-4f3d-96d7-1a441e071ef4');
      data.append('Patient_id', email);
      data.append('Amount', '4200');

      console.log('data', data);
      // Alert('data', data);
try{


  let res= fetch(`${url}/Finance/requestFA`, {
    method: 'POST',
    headers: {
      // Accept: 'application/json',
      'Content-Type': 'multipart/form-data',
      Authorization: `Bearer ${user.refresh_token}`,
    },
    body: data,
  })
    console.log('res in fecth ', res);

      
    } catch (error) {
      console.log('error in upload', error);
    }
  } 
  };

Когда я печатаю формуData во frontend, она показывает все значения следующим образом:

blob {"_h": 0, "_i": 2, "_j": [TypeError: Already read], "_k": null, "_o": 0}
 LOG  data {"_parts": [["Attachment", [Promise]], ["Address", [Object]], ["CNIC", [Object]], ["Phone_Number", [Object]], ["Status", "Pending Response"], ["Description", [Object]], ["Appointment_id", "b082564a-67f0-4f3d-96d7-1a441e071ef4"], ["Patient_id", "testmobile@gmail.com"], ["Amount", "4200"]]}
 LOG  res in fecth  {"_h": 0, "_i": 0, "_j": null, "_k": null}

однако, когда я печатаю запрос в бэкенде, он не показывает некоторые значения, такие как описание, прикрепление адреса и т.д.

<QueryDict: {'Status': ['Pending Response'], 'Appointment_id': ['b082564a-67f0-4f3d-96d7-1a441e071ef4'], 'Patient_id': ['testmobile@gmail.com'], 'Amount': ['4200']}>
'Description'
Bad Request: /Finance/requestFA

Вернуться на верх