title: Upload image through axios in React Native
body: <p>I've been dealing with this problem for a while now apparently you can upload a image using <code>FormData</code> and appending the file but I am still unable to get this to work. I have already tried with the following threads:</p>
  <ul>
  <li><a href="https://stackoverflow.com/questions/52936988/react-native-axios-trying-to-upload-image">React Native - Axios - Trying to upload image</a></li>
  <li><a href="https://stackoverflow.com/questions/61046007/form-post-with-file-attach-throws-network-error-react-native-react-native-im">form post with file attach throws network error / React Native + react native Image picker</a></li>
  <li><a href="https://stackoverflow.com/questions/41878838/how-do-i-set-multipart-in-axios-with-react/42096508#42096508">How do I set multipart in axios with react?</a></li>
  </ul>
  <p>My first problem revolves around <code>FormData().append()</code>, in most solutions a blob/file is configured using the <code>uri</code> property but I <strong>don't have</strong> access to this property (Is this related to Typescript?). So something like this:</p>
  <pre><code>formData.append(&quot;profile_photo&quot;, {
       uri: values.imageURI
  });
  </code></pre>
  <p>Here's the error TS is returning:</p>
  <pre><code>Argument of type '{ uri: string; }' is not assignable to parameter of type 'string | Blob'.
  Object literal may only specify known properties, and 'uri' does not exist in type 'Blob'.ts(2345)
  </code></pre>
  <p>Another key points is setting up my axios client with the <code>Content-Type</code> header, I've done this during my POST request like so:</p>
  <pre><code> // Perform a profile post request
  const profileResponse = await loginClient.post(
        &quot;/user_profile&quot;,
         formData,
         {
             headers: {
                  &quot;Content-Type&quot;: &quot;multipart/form-data&quot;,
              },
         }
  );
  </code></pre>
  <p><strong>But</strong> by logging my request with Axios' interceptors, here how the request headers look like:</p>
  <pre class="lang-json prettyprint-override"><code>    headers:
      Accept: &quot;application/json&quot;
      Authorization: &quot;Bearer 36|8SVw1DntRKni0sUn4NDX9moLluCHyYcZSadfgI5B&quot;
      __proto__: Object
  </code></pre>
  <p>Just a few observations:</p>
  <ul>
  <li>The image uri is changed using <a href="https://docs.expo.io/versions/latest/sdk/imagepicker/" rel="nofollow noreferrer">expo-image-picker</a>.</li>
  <li>I'm using <a href="https://formik.org/" rel="nofollow noreferrer">Formik</a> to build my form.</li>
  <li>I'm using Typescript.</li>
  </ul>