Images posted to server via fetch get their size inflated significantly

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.js

It 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 IMG and DOWNLOAD BIN to save an image and a binary file to app storage (original image size: 260,062 bytes)

• Then try clicking on UPLOAD IMG or UPLOAD BIN and 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)

[ShogunPanda]

One final note on this. As you can see, this has been fixed in 0.64.2.

If, by any chance, you are stuck in a lower version, I can tell you @awinograd solution works, but it can be overly simplified. What Alec forgot to mention is that bug happens not due to the file content nor for the blob MIME but just due to the file extension.

Which means just renaming the file or copying to another destination with a suffix is enough. Like:

const finalPath = image.path + '.toUpload';
await RNFS.copyFile(image.path, finalPath);

image = { ...image, uri: `file://${finalPath}`, path: finalPath };

Hope this helps!

[dmarkow]

Having the same issue on 0.66.4. Looks like the fix was reversed pretty quickly, so I’m wondering if it ever actually got included in a release…