how to send image or files to server by API body in react native

Question

I am new to react native I want to send Images And files To server by API body .I want to send signature too. here is my code please help. thanks..

<=======================here is my api code======================>
 fetch('https://xyz.tech/Android_API_CI/uploaddata/retail_details?query=', {
      method: 'POST',
      headers: {'Accept': 'application/json, text/plain, */*', "Content-Type": "application/json" },
      // We convert the React state to JSON and send it as the POST body
      body: JSON.stringify([{ }])
    })
    .then((returnValue) => returnValue.json())
    .then(function(response) {
      console.log(response)
      return response.json();

<===========================here is my take picture and pick image code================================>
 const takePicture = async (type) => {
    if (camera) {
      const data = await camera.takePictureAsync(null);
      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('');
    }
  };


  const pickImage = async (type) => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      base64:true,
      quality: 1,
    });
    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 });
      this.setState({ singleFile: res });
}
}
<==================here is my image selector code====================>
 <View
              style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
              <View style={{ flexDirection: 'row', paddingTop: 30 }}>
                   <TextInput 
                        maxLength={30}
                        placeholder="PAN Card Number *"
                        style={styles.inputStyle}
                        onChangeText={(text)=>handlePAN(text)}
                        defaultValue={PAN}
                        value = {PAN} />

<==============here is my signature code=============================>

                    <SignatureScreen style={{height: 200}}
                        ref={ref}
                        onEnd={handleEnd}
                        onOK={handleSignature}
                        onEmpty={handleEmpty}
                        onClear={handleClear}
                        descriptionText={'Sign here!'}
                    />

 const ref = useRef();

  const handleSignature = (signature) => {
    // console.log(signature);
  };

  const handleEmpty = () => {
    console.log('Empty');
  };

  const handleClear = () => {
    console.log('clear success!');
  };

  const handleEnd = () => {
    ref.current.readSignature();
  };

<===================here I have display images in array============>
   <Text>PAN CARD</Text>
            {imageArray.PAN && (
              <Image
                source={{ uri: imageArray.PAN }}
                style={{
                  width: 100,
                  height: 100,
                  borderRadius: 10,
                  margin: 5,
                }}
              />
            )}
            
            <Text>Aadhar CARD</Text>
            <View style={{flex:1,flexDirection: "row"}}>
            {imageArray.ADH && (
              <Image
                source={{ uri: imageArray.ADH }}
                style={{
                  width: 100,
                  height: 100,
                  borderRadius: 10,
                  margin: 5,
                }}
                />
            )}

please ignore this =I am new to react native I want to send Images And files To server by API body .I want to send signature too. here is my code please help. thanks. I am new to react native I want to send Images And files To server by API body .I want to send signature too. here is my code please help. thanks. I am new to react native I want to send Images And files To server by API body .I want to send signature too. here is my code please help. thanks..

Answer 1

If we are supposed to upload the image(s) to our server we have to send the data in the formdata format.

checkout the example to upload images to the server.

https://heartbeat.fritz.ai/how-to-upload-images-in-a-react-native-app-4cca03ded855