Images posted to server via fetch get their size inflated significantly #27099
Description
React Native version:
System:
OS: macOS 10.15
CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
Memory: 181.84 MB / 8.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
IDEs:
Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.1 => 16.8.1
react-native: 0.61.3 => 0.61.3
react-native-cli: 2.9.0
Description
After upgrading to RN 0.61.3, we observed that the hash of an image received on the server differs with the hash of the original picture on the phone.
The size is actually inflated significantly
jpg on the phone: 264KB
jpg received on the server: 628KB
This issue happens on iOS (13.1 tested only)
No issue detected on Android
Downgrading to 0.59 fixes the issue.
_body
const formData = new FormData()
formData.append(`files`, {
uri: 'file://' + filepath,
name: 'test.jpg',
filename: 'test.jpg',
type: 'application/octet-stream'
})
Headers
{
Accept: 'application/json',
// doesn't work with 'application/octet-stream' neither
'Content-Type': 'multipart/form-data'
}
Request
// prepare form data
// send post request
fetch(`http://localhost:3000/upload`,
{
method: 'POST',
headers: {
Accept: 'application/json',
// doesn't work with 'application/octet-stream' neither
'Content-Type': 'multipart/form-data'
},
body: formData
}).then(resp => {
console.log('success: ' + JSON.stringify(resp))
}).catch(err => {
console.log('error: ' + err.message)
})
The image size is unchanged until it is posted.
Image received by the server is modified.
Steps To Reproduce
Clone test repository
https://github.com/ivzeus/test-uploader
Start local node server to receive file uploads
The server sample is based on this repository
# in project root
cd server
npm i
node ./server.jsIt starts a server at localhost:3000 and accepts file upload through /upload POST request. Uploaded files will be stored in server/uploads folder.
Run ReactNative sample
This sample was created by initializing a blank React Native project
To run the demo:
# in project root
npm i
cd ios
pod install
cd ..
npm run ios-
First click on
DOWNLOAD IMGandDOWNLOAD BINto save an image and a binary file to app storage (original image size: 260,062 bytes) -
Then try clicking on
UPLOAD IMGorUPLOAD BINand observe the server console -
Notice how the image file has been changed when uploaded, but not the binary file (new image size: 718,367 bytes)