Images posted to server via fetch get their size inflated significantly

[thmsl]

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)

[thmsl]

We are now refactoring using rn-fetch-blob instead of axios.

[tareqdayya]

same happens with me when trying to convert image to blob to send over network:

const img = await fetch(MY_IMAGE_URI);
const blob = await img.blob();
console.log(blob.size);

the blob size is 2x the size of the original picture. The problem appears to only affect ios. Android is fine.

I now use react-native-fetch-blob to work around this.

[builtbyproxy]

We are now refactoring using rn-fetch-blob instead of axios.

Hey @thmsl Could you please offer some insight into why this change was made?
Also, if we don't want this size increase how would you suggest we prevent it?

[cristianoccazinsp]

Facing the same issue on iOS. Uploaded image with fetch is inflated and loses all its metadata, what's going on? Why is the file even tampered with?

UPDATE: Just confirmed the issue. Doing a multipart POST request with an image results in the image being twice as big and lost metadata. Doing the exact same request with another library (e.g., rn-fetch-blob or RNBackgroundUpload) uploads the image as is. This seems to be only an iOS issue.

Please review this issue asap, this is quite critical and also suspicious that a network library modifies files before uploads.

[sanqi-med]

the reason is that：when we upload a jpg image，react native will use RCTImageLoader to load the image , in RCTImageLoader:

• (id)sendRequest:(NSURLRequest *)request withDelegate:(id)delegate
  {
  __block RCTImageLoaderCancellationBlock requestToken;
  requestToken = [self loadImageWithURLRequest:request callback:^(NSError *error, UIImage *image) {
  if (error) {
  [delegate URLRequest:requestToken didCompleteWithError:error];
  return;
  }

    NSString *mimeType = nil;
    NSData *imageData = nil;
    if (RCTImageHasAlpha(image.CGImage)) {
        mimeType = @"image/png";
        imageData = UIImagePNGRepresentation(image);
    } else {
        mimeType = @"image/jpeg";
        imageData = UIImageJPEGRepresentation(image, 1.0);
    }
  
    NSURLResponse *response = [[NSURLResponse alloc] initWithURL:request.URL
                                                        MIMEType:mimeType
                                           expectedContentLength:imageData.length
                                                textEncodingName:nil];
  
    [delegate URLRequest:requestToken didReceiveResponse:response];
    [delegate URLRequest:requestToken didReceiveData:imageData];
    [delegate URLRequest:requestToken didCompleteWithError:nil];
  

  }];

  return requestToken;
  }

when a jpg image upload,RCTImageLoader will use UIImageJPEGRepresentation(image, 1.0) to get the blob ,while UIImageJPEGRepresentation function get the size is different of the origin image size.that the reason why jpg image size is different, png size is same

[cristianoccazinsp]

Why does react native need all that? Can't it just treat the image as a regular file? Loading the whole image in memory and doing professing on it is definitely a bad idea; it should be treated as any file. El sáb., 21 de marzo de 2020 06:00, MrZhaoCn <notifications@github.com> escribió:

…

the reason is that：when we upload a jpg image，react native will use RCTImageLoader to load the image , in RCTImageLoader: - (id)sendRequest:(NSURLRequest *)request withDelegate:(id)delegate { __block RCTImageLoaderCancellationBlock requestToken; requestToken = [self loadImageWithURLRequest:request callback:^(NSError *error, UIImage *image) { if (error) { [delegate URLRequest:requestToken didCompleteWithError:error]; return; } NSString *mimeType = nil; NSData *imageData = nil; if (RCTImageHasAlpha(image.CGImage)) { mimeType = @"image/png"; imageData = UIImagePNGRepresentation(image); } else { mimeType = @"image/jpeg"; imageData = UIImageJPEGRepresentation(image, 1.0); } NSURLResponse *response = [[NSURLResponse alloc] initWithURL:request.URL MIMEType:mimeType expectedContentLength:imageData.length textEncodingName:nil]; [delegate URLRequest:requestToken didReceiveResponse:response]; [delegate URLRequest:requestToken didReceiveData:imageData]; [delegate URLRequest:requestToken didCompleteWithError:nil]; }]; return requestToken; } when a jpg image upload,RCTImageLoader will use UIImageJPEGRepresentation(image, 1.0) to get the blob ,while UIImageJPEGRepresentation function get the size is different of the origin image size.that the reason why jpg image size is different, png size is same — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#27099 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALU263F3JJ4PEOHEUCNHDOLRIR63VANCNFSM4JIOYWIA> .

[ganzik83]

https://stackoverflow.com/questions/56682109/react-native-through-upload-image-on-s3-bucket-using-aws-sdk

1. add node-module 'base64-arraybuffer'

yarn add base64-arraybuffer

import {decode} from 'base64-arraybuffer';
import RNFS from 'react-native-fs';

 const base64 = await RNFS.readFile(filePath, 'base64');
  // console.log('base64', base64); //get base64 data

  const arrayBuffer = decode(base64);
  //console.log('arrayBuffer', arrayBuffer.byteLength); // don't increase file size

[MayoudP]

@cristianoccazinsp Did you succeed to fixe it or found a workaround ?

[cristianoccazinsp]

@MayoudP I ended up using rn-fetch-blob to upload files.

[MayoudP]

@MayoudP I ended up using rn-fetch-blob to upload files.

I wasn't able to make this library works with a pre-signed URL for an upload on S3... By any chances, do you have any snippet code or example ?