title: react-native and axios, upload image to ASP .NET Core API
body: <p>I'm developing a <code>react-native</code> App which permits, in a specific page, to take a photo with the phone camera and then upload with an <code>axios</code> API call.</p>
  <p>The function is this:</p>
  <pre><code>export const insertMissingProductPhotos = async (
      imageId: string,
      file1Base64: string)
  
      const formData = new FormData();
      formData.append('imageId', imageId);
      formData.append(&quot;image1&quot;, fromBase64JpgToFile(file1Base64, &quot;image1.jpeg&quot;));
      
      await axios.post(
          &quot;/tracking/insertMissingProductPhotos&quot;,
          formData,
          {
              headers: {
                  &quot;Content-Type&quot;: &quot;multipart/form-data&quot;
              }
          });
  
  };
  </code></pre>
  <p>I get the image with <code>base64</code> encoding (it is a jpeg for sure).</p>
  <p>Then consider this method, in which I convert the <code>base64</code> string to something that I can append to <code>FormData</code>:</p>
  <pre><code>const fromBase64JpgToFile = (base64Image: string, fileName: string) =&gt; {
      const buffer = Buffer.from(base64Image, 'base64');
      return new File([buffer], fileName, {type: 'image/jpeg'});
  }
  </code></pre>
  <p>My backend, made in <code>ASP .NET Core 6</code>, has a method with this signature:</p>
  <pre><code>[HttpPost]
  [Route(&quot;insertMissingProductPhotos&quot;)]
  public async Task&lt;IActionResult&gt; InsertMissingProductPhotos([FromForm] InsertMissingProductPhotosRequest request)
  </code></pre>
  <p>Where the <code>InsertMissingProductPhotosRequest</code> is:</p>
  <pre><code>public class InsertMissingProductPhotosRequest
  {
      public string? ImageId { get; set; }
      public IFormFile? Image1 { get; set; }
  }
  </code></pre>
  <p>When the <code>axios</code> call arrives to the backend, what happens is that:</p>
  <ul>
  <li>The <code>InsertMissingProductPhotosRequest</code> is populated</li>
  <li><code>ImageId</code> has the correct value</li>
  <li><code>Image1</code> has an instance, it's not null, the <code>FileName</code> is correct, the headers are correct, BUT the <code>ContentLenght</code> is 0. It seems that the image arrives with no bytes.</li>
  </ul>
  <p>Do you have any idea why is this happening? Maybe something wrong in my <code>fromBase64JpgToFile</code>?</p>
  <ul>
  <li>I'm sure that my <code>base64</code> image is correctly populated (I checked with console.log, but also by putting a fixed <code>base64</code> string)</li>
  </ul>