What is wrong with my code. Data not sending or uploading to server with multipart in react native

Question

I am new t react native. I have created a form from this form I am sending and uploading images to server with multipart formData. but the problem is when I submit data not going in server. and Not a single error is coming. so please tell is I write wrong code. or what is the problem. what mistake I am making in code.

here is my code.

export default function Add(props) {

  const { navigation } = props

  const [singleFilePAN, setSingleFilePAN] = useState('');
  const [singleFileADH, setSingleFileADH] = useState('');
  const [singleFileADH1, setSingleFileADH1] = useState('');
  const [singleFileSIGN, setSingleFileSIGN] = useState('');
  const [imageArray, setImageArray] = useState({
    PAN: null,
    GST: null,
    ADH: null,
    ADH1: null,
  });

 const validateInputs = () => {

    console.log(singleFilePAN)
    console.log(singleFileADH)
    console.log(singleFileADH1)
    console.log(singleFileSIGN)
    
    if (singleFilePAN && singleFileADH && singleFileADH1 && singleFileSIGN != null) 
    {
    if (!/[A-Z]{5}[0-9]{4}[A-Z]{1}/.test(PAN) && imageArray.GST === null){
      setPanError('Please Insert valid PAN Card Image \n And Valid Pan card number')
      return;
    }
    if (!/^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$/.test(GST))  {
      setGstError('Please Insert valid GST Number')
      return;
    }
    if (!/^\d{4}\s\d{4}\s\d{4}$/.test(ADH)) { 
      setAdhError('Please Insert valid Aadhar Card Image \n And Valid Adhar card number')
      return;
    }
    else 
    {

        //+++++++++++++++++++++++++++++++++=submitting form data to api start+++++++++++++++++++++++++++++++++++
{

  const leadTagNumber = props.route.params.leadTagNumber

    AsyncStorage.multiGet(["application_id", "created_by",'leadTagNumber']).then(response => {

  const formData = new FormData();

formData.append(JSON.stringify('lead_tag_number',leadTagNumber));
formData.append(JSON.stringify('pan_card_number', PAN));
formData.append(JSON.stringify('aadhar_card_number', GST));
formData.append(JSON.stringify('idfy_pan_card_status', "Done"));
formData.append(JSON.stringify('idfy_aadhar_card_status',"Done"));
formData.append(JSON.stringify('entry_sorce', "App"));
formData.append(JSON.stringify('created_by', response[1][1]));
formData.append(JSON.stringify('application_id', response[0][1]));
formData.append(JSON.stringify('is_active', "Y"));
formData.append(JSON.stringify('is_deleted', "N"));
formData.append(JSON.stringify('created_time', ""));

formData.append('upload_pancard', 
  {
    uri: singleFilePAN,
    name: 'pancardImage.jpg',
    type: 'image/jpg/png'
  }
);
formData.append('upload_aadhar', 
    {
        uri: singleFileADH,
        name: 'upload_aadhar.jpg',
        type: 'image/jpg/png'
    }
);
formData.append('upload_aadhar_second', 
    {
        uri: singleFileADH1,
        name: 'upload_aadhar_second.jpg',
        type: 'image/jpg/png'
    }
);
formData.append('digital_signature', 
    {
        uri: singleFileSIGN,
        name: 'digital_signature.jpg',
        type: 'image/jpg/png'
    }
);

  fetch('https://xyz.tech/Android_API_CI/_data', {
      method: 'POST',
      headers: {'Accept': 'application/json, text/plain, */*', "Content-Type": "application/json" },

      body: formData

    })
    .then((returnValue) => returnValue.json())
    .then(function(response) {
      console.log(response)
      Alert.alert("File uploaded");
      return response.json();
      
     
    });
  });
  // event.preventDefault();
  }
  //+++++++++++++++++++++++++++++++++submitting form data to api end++++++++++++++++++++++++++++++++++++++

      Alert.alert("success")
      return;
}
    }
  };

 const takePicture = async (type) => {
    if (camera) {

      const data = await camera.takePictureAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.All,
      });

      console.log(data.uri);
      const newImageArr = imageArray;
      if (imageType === 'PAN') {
        newImageArr.PAN = data.uri;
      }else if (imageType === 'ADH' && evenTry) {
        newImageArr.ADH = data.uri;
        setEvenTry((val) => !val);
      } else if (imageType === 'ADH' && !evenTry) {
        newImageArr.ADH1 = data.uri;
        setEvenTry((val) => !val);
      }
      setImageArray({...newImageArr});
      
      setShowCamera(false);
      setImageType('');
      setSingleFilePAN({ singleFilePAN: newImageArr.PAN});
      setSingleFileADH({ singleFileADH: newImageArr.ADH});
      setSingleFileADH1({ singleFileADH1: newImageArr.ADH1});
    }
  };


  const pickImage = async (type) => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
    });

    console.log(result.uri);
    if (!result.cancelled) {
      const newImageArr = imageArray;
      if (type === 'PAN') {
        newImageArr.PAN = result.uri;
      } else if (type === 'ADH' && evenTry) {
        newImageArr.ADH = result.uri;
        setEvenTry((val) => !val);
      } else if (type === 'ADH' && !evenTry) {
        newImageArr.ADH1 = result.uri;
        setEvenTry((val) => !val);
      }
      setImageArray({ ...newImageArr });
     setSingleFilePAN({ singleFilePAN: newImageArr.PAN});
     setSingleFileADH({ singleFileADH: newImageArr.ADH});
     setSingleFileADH1({ singleFileADH1: newImageArr.ADH1});
    }

Answer 1

Here you only sending the keys when you using the JSON.stringify('','') in the form data.

You separately have to put the key and value while appending the key and value.

For Example:

formData.append('lead_tag_number',leadTagNumber);
formData.append('pan_card_number', PAN);
formData.append('aadhar_card_number', GST);
formData.append('idfy_pan_card_status', "Done");
formData.append('idfy_aadhar_card_status',"Done");
formData.append('entry_sorce', "App");
formData.append('created_by', response[1][1]);
formData.append('application_id', response[0][1]);
formData.append('is_active', "Y");
formData.append('is_deleted', "N");
formData.append('created_time', "");