iOS - Image files included in outbound network requests are significantly larger than the original files

Description

When creating a multipart/form-data request with a FormData object whose parts contain a uri property pointing to an image file, the resulting network request is much (~3-4 times) larger than the original image file.

This issue only occurs on iOS. This is a duplicate of #27099, which has been closed but is not fixed.

Version

0.67.3

Output of npx react-native info

System:
    OS: macOS 12.3.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 973.39 MB / 32.00 GB
    Shell: 3.3.1 - /usr/local/bin/fish
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.8.0 - /usr/local/bin/npm
    Watchman: 2022.03.21.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK:
      API Levels: 28, 29, 30, 31
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.1, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0
      System Images: android-23 | Google APIs Intel x86 Atom_64, android-24 | Google APIs Intel x86 Atom, android-24 | Google Play Intel x86 Atom, android-26 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Google Play Intel x86 Atom, android-31 | Google Play Intel x86 Atom_64
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8309675
    Xcode: 13.3.1/13E500a - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.11 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.67.3 => 0.67.3
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Obtain a URI to any on-disk image, call it fileUri.
Create a FormData object with the file uri:

const formData = new FormData();
formData.append('file', { type: 'application/octet-stream', name: 'image.jpeg', uri: fileUri });

Then, make a request with that form data:

const response = await fetch('https://postman-echo.com/post', { method: 'POST', body: formData })

Observe the content-length of the request headers if you control the server, or in this example, observe the response body from postman-echo.

Snack, code example, screenshot, or link to a repository

Snack demonstrating issue (and current workaround): https://snack.expo.dev/@httpriestess/image-upload-size-repro

It posts an image file to postman-echo, and then displays the content-length header that postman-echo returns.

Inizia con la riproduzione Snack collegata e l’implementazione iOS della gestione di fetch/FormData; confronta la lunghezza del contenuto della richiesta multipart con l’immagine originale. Il lavoro è completato quando una richiesta iOS costruita a partire da un URI non espande più i dati dell’immagine e la riproduzione fornita continua a essere caricata correttamente.