RNFetchBlob.fetchBlobForm failed to create request body - Issue happens intermediately

“react”: “16.6.3”, “react-native”: “0.58.4”, “react-native-camera”: “^1.12.0”, “react-native-fetch-blob”: “^0.10.8”, “react-native-fs”: “^2.13.3”, “react-native-video”: “^4.4.0”, “rn-fetch-blob”: “^0.10.15”

I am trying to upload a text file using react-native-fetch-blob to AWS. However, it works intermediately. On ios, I get the following error:

[Error: RNFetchBlob.fetchBlobForm failed to create request body] line: 93775, column: 34, sourceURL: ‘http://10.48.56.187:8081/index.bundle?platform=ios&dev=true&minify=false’

Code is as follows:

async logGeoCoordinate(coordinates, originalFileName, fileExtensionIndex) {
    
var mediaGeoDataFilePath = RNFS.DocumentDirectoryPath + '/' +  originalFileName.substring(0, fileExtensionIndex) + '.txt';

 const formData = [];
    formData.push({
      name: "file",
      filename: originalFileName.substring(0, fileExtensionIndex) + '.txt',
      data: RNFetchBlob.wrap(mediaGeoDataFilePath)
    });

    var transformedCoordinates = JSON.stringify(coordinates);
    console.log('Stringfy coordinates -> ', transformedCoordinates);

    RNFS.writeFile(mediaGeoDataFilePath, transformedCoordinates, 'utf8')
    .then((success) => {
      console.log('Media Geo Data written to file -> ');
    })
    .catch((err) => {
      console.log('Error Writing Media\'s Geo Data to File -> ', err.message);
    });

    RNFS.readFile(mediaGeoDataFilePath, 'utf8')
    .then((success) => {
      console.log('Media Geo Data read from file -> ', success);
    })
    .catch((err) => {
      console.log('Error Reading Media\'s Geo Data from File -> ', err.message);
    });

    /*Works intermediately*/
    let response = await RNFetchBlob.fetch(
      "POST",
      "uploadUrl",
      {
        Accept: "application/json",
        "Content-Type": "multipart/form-data"
      },
      formData
    ).then(response => {
      console.log('RNFetchBlob->response', response );
      alert('Media GeoData Upload Successful!');
      })
      .catch(error => {
        console.log('RNFetchBlob->error', error );
        alert('Media GeoData Upload Error!');
        });
  }   

/* mediaGeoDataFilePath -> ‘/var/mobile/Containers/Data/Application/30D81CEA-A393-4E1B-BE67-2F624A3DA3CB/Documents/VID_26A13FCE-A62B-43E6-9845-8916A0FBE0AF.txt’

TransformedCoordinates are as follows: ‘[{“latitude”:37.39552483433933,“longitude”:-122.14875334286728,“timestamp”:“Fri, 15 Mar 2019 18:10:48 GMT”},{“latitude”:37.39552483433933,“longitude”:-122.14875334286728,“timestamp”:“Fri, 15 Mar 2019 18:10:51 GMT”}]’;

FormData -> [ { name: ‘file’, filename: ‘VID_F6C343AC-39C0-4D48-A570-D8C591F629AF.txt’, data: ‘RNFetchBlob-file:///var/mobile/Containers/Data/Application/30D81CEA-A393-4E1B-BE67-2F624A3DA3CB/Documents/VID_F6C343AC-39C0-4D48-A570-D8C591F629AF.txt’ } ] */

It uploads text file sometime and other times, doesn’t, even if the file size is exactly same in size, example, 215 bytes.

If someone could explain why do I get this error, it would be great.

[alexander126]

I had the same issue and managed to solve it by trimming the string like that uri.replace('file://', '') and then pass the trimmed string like this data: RNFetchBlob.wrap(decodeURIComponent(trimmedString)), Hope this helps someone who’s struggling

[jimmywong123]

I had the same issue and managed to solve it by trimming the string like that uri.replace('file://', '') and then pass the trimmed string like this data: RNFetchBlob.wrap(decodeURIComponent(trimmedString)), Hope this helps someone who’s struggling

it works for me!