title: React-native RNFetchBlob: Axios Post request sends string instead of binary data
body: <p>I have been implementing upload file functionality into React-native recently and came across an error where I need to post binary file data into Request body.</p>
  <p>First of all, I have checked how <strong>Postman</strong> works and I tested this API into postman where I send <code>Authorization</code> and <code>uid</code> into request headers and <code>body</code> will be <strong>Form-Data</strong> with <code>document</code> = <code>binary file</code>.</p>
  <p>See below is <code>document</code> key where we are able to select file object in Postman.</p>
  <p><a href="https://i.stack.imgur.com/j0KRF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j0KRF.png" alt="Postman request body representation. Document is of type File." /></a></p>
  <p>Now this Postman request succeeds this way and if I check relevant code for <strong>NodeJs-Axios</strong>, it's just as added here.</p>
  <p>This code is from Postman intended just for explanation.</p>
  <pre><code>var axios = require('axios');
  var FormData = require('form-data');
  var fs = require('fs');
  var data = new FormData();
  data.append('document', fs.createReadStream('LOCAL_PATH_TO_FILE/Screenshot 2021-01-28 at 12.26.32 PM.png'));
  
  var config = {
    method: 'post',
    url: 'API_BASE/addDocument/',
    headers: { 
      'Authorization': 'Firebase_ID_Token', 
      'uid': 'Firebase_User_ID', 
      ...data.getHeaders()
    },
    data : data
  };
  
  axios(config)
  .then(function (response) {
    console.log(JSON.stringify(response.data));
  })
  .catch(function (error) {
    console.log(error);
  });
  </code></pre>
  <p>As we are not able to use the same function added above for React-native and I have used <code>react-native-document-picker</code>, when I pick any file, the object I get is like,</p>
  <pre><code>{
   
      &quot;size&quot;:1173,
      &quot;fileCopyUri&quot;:&quot;file:///Users/Local_File_Path.plist&quot;,
      &quot;name&quot;:&quot;File_Name.plist&quot;,
      &quot;uri&quot;:&quot;file:///Users/Local_File_Path.plist&quot;
  }
  </code></pre>
  <p>I need to upload this file (e.g. plist) via API call to <code>/adDocument</code> endpoint where this endpoint expects request body as <code>document: (binary data)</code>.</p>
  <p>So, here is my main function for <strong>addDocument API call</strong> which needs to be corrected to send proper data to API.</p>
  <pre><code>import RNFetchBlob from 'rn-fetch-blob';
  var RNFS = require('react-native-fs');
  
  async uploadFileData (fileData) {
    try {
      console.log(&quot;***** uploadFileData parameters =&gt;&gt;&gt;&gt;&gt; &quot;, fileData);
  
      const mainPath = fileData.uri.replace(&quot;file://&quot;, &quot;&quot;);
      let readStreamData = await RNFetchBlob.fs.readStream(mainPath, 'base64');
      let readFileData = await RNFS.readFile(mainPath);
      let wrapData = RNFetchBlob.wrap(mainPath);
      
      let data = new FormData();
      data.append('document', readStreamData, {'name': fileData.name});
      //data.append('document', new Blob([readFileData]), {'name': fileData.name});
      //data.append('document', readFileData, {'name': fileData.name});
      
      const apiHeader = {
          'Authorization': 'Google_ID_Token',
          'uid': 'Google_User_ID',
          'Content-Type': 'multipart/form-data',
          'Cache-Control' : 'no-store'
      };
  
      const res = await axios({ 
        method: 'POST',
        headers: apiHeader,
        data: data,
        baseURL: 'BASE_URL',
        url: '/addDocument/'
      });
    
      console.log(&quot;document/addDocument =&gt;&gt;&gt;&gt;&gt; &quot;, res);
      return res;
    } catch (e) {
      console.log(&quot;xxxxxxx document/addDocument Error =&gt;&gt;&gt;&gt;&gt; &quot;, e);
      return {  error: e  };
    }
  }
  </code></pre>
  <p>I always receive failure with this function using any of the above mentioned methods, <code>readStreamData</code>, <code>readFileData</code> or <code>wrapData</code>. The reason is, I am never able to pass binary data into <code>document</code>.</p>
  <p>What I see in request body is like,</p>
  <p><a href="https://i.stack.imgur.com/HDeRl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HDeRl.png" alt="enter image description here" /></a></p>
  <p>Here, <code>[object Object]</code> is a string and not an object and so, my API call throws me error stating, data missing. It always passes string event I use 'Blob()'.</p>
  <p>So, I want to know what I am doing wrong here so my request body is not passing binary data. Please send me any pointers on the topic so I can reach to the solution.</p>