iOS - Image files included in outbound network requests are significantly larger than the original files #33760
Description
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.