IOS: the fileSize of the selected image is bigger then the original one [🐛]

Description

Continues to happen in version 4.

After selecting an image using the library, the asset object contains a fileSize that is different (bigger) from the original image size. NO maxWidth and NO maxHeight were applied. quality: 1.

This issue has been reported a couple of times in the past #1419, #514 but these reports have been closed and the issue continues to happen.

How to repeat issue and example

• Note the image size from the photos app on iOS
• Select that image using this library (NO maxWidth, NO maxHeight, quality: 1) and compare the sizes (sometimes the image is 2 or even 3 times bigger in size)

launchImageLibrary({
  includeBase64: false,
  mediaType: 'photo',
  quality: 1,
  selectionLimit: 1,
}, (response) => {
  const { assets } = response;

  if (Array.isArray(assets) && assets.length > 0) {
    const [{ fileSize }] = assets;

    console.log(fileSize / 1024 / 1024);
    console.log(fileSize / 1000 / 1000);
  }
})

Expected: 1.9 Result:

6.392001152038574
6.7024989999999995

Solution

What needs to be done to address this issue?

Make sure that the fileSize of the selected image is the same as the original one when no maxWidth and no maxHeight options provided and quality option is set at 1.

Additional Information

Tested on:

• Image Picker version: v4.1.1 and v4.6.0
• React Native version: v0.63.3
• Platform: iOS (iPhone 11 - real device)
• Development Operating System: MacOS v12.0 and v12.1
• Dev tools:
  • Xcode v13.1 and v13.2
  • iOS v14.4, v15.1 and v15.2
  • node v14.17.4

[LefterisL]

Indeed I came up on this myself too. On Android the filesize is reduced just fine but on iOS I once noticed an image from 1.7MB to become 3MB.

[ntdiary]

In addition if the above temp image size is still larger when transferring over the network, it’s likely because the RCTNetworking.mm is still using RCTImageLoader.mm to convert the image uri to binary data.

you can customize a new handler to the RCTNetworking.mm (put these two files in your project)

//
//  OriginImageRequestHandler.h
//

#import <React/RCTURLRequestHandler.h>

@interface OriginImageRequestHandler : NSObject <RCTURLRequestHandler>

@end

//
//  OriginImageRequestHandler.mm
//

#import <Foundation/Foundation.h>
#import <ReactCommon/RCTTurboModule.h>

#import <MobileCoreServices/MobileCoreServices.h>
#import <React/RCTUtils.h>

#import "OriginImageRequestHandler.h"

@interface OriginImageRequestHandler() <RCTTurboModule>

@end

@implementation OriginImageRequestHandler
{
  NSOperationQueue *_fileQueue;
}

RCT_EXPORT_MODULE()

- (void)invalidate
{
  [_fileQueue cancelAllOperations];
  _fileQueue = nil;
}

- (BOOL)canHandleRequest:(NSURLRequest *)request
{
  NSLog(@"home path is %@", NSHomeDirectory());
  return [request.URL.scheme caseInsensitiveCompare:@"file"] == NSOrderedSame
  && RCTIsLocalAssetURL(request.URL)
  && !RCTIsBundleAssetURL(request.URL);
}

- (NSOperation *)sendRequest:(NSURLRequest *)request
                withDelegate:(id<RCTURLRequestDelegate>)delegate
{
  // Lazy setup
  if (!_fileQueue) {
    _fileQueue = [NSOperationQueue new];
    _fileQueue.maxConcurrentOperationCount = 4;
  }

  __weak __block NSBlockOperation *weakOp;
  __block NSBlockOperation *op = [NSBlockOperation blockOperationWithBlock:^{

    // Get content length
    NSError *error = nil;
    NSFileManager *fileManager = [NSFileManager new];
    NSDictionary<NSString *, id> *fileAttributes = [fileManager attributesOfItemAtPath:request.URL.path error:&error];
    if (!fileAttributes) {
      [delegate URLRequest:weakOp didCompleteWithError:error];
      return;
    }

    // Get mime type
    NSString *fileExtension = [request.URL pathExtension];
    NSString *UTI = (__bridge_transfer NSString *)UTTypeCreatePreferredIdentifierForTag(
      kUTTagClassFilenameExtension, (__bridge CFStringRef)fileExtension, NULL);
    NSString *contentType = (__bridge_transfer NSString *)UTTypeCopyPreferredTagWithClass(
      (__bridge CFStringRef)UTI, kUTTagClassMIMEType);

    // Send response
    NSURLResponse *response = [[NSURLResponse alloc] initWithURL:request.URL
                                                        MIMEType:contentType
                                           expectedContentLength:[fileAttributes[NSFileSize] ?: @-1 integerValue]
                                                textEncodingName:nil];

    [delegate URLRequest:weakOp didReceiveResponse:response];

    // Load data
    NSData *data = [NSData dataWithContentsOfURL:request.URL
                                         options:NSDataReadingMappedIfSafe
                                           error:&error];
    if (data) {
      [delegate URLRequest:weakOp didReceiveData:data];
    }
    [delegate URLRequest:weakOp didCompleteWithError:error];
  }];

  weakOp = op;
  [_fileQueue addOperation:op];
  return op;
}

- (void)cancelRequest:(NSOperation *)op
{
  [op cancel];
}

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
    (const facebook::react::ObjCTurboModule::InitParams &)params
{
  return nullptr;
}

- (float)handlerPriority
{
  return 4;
}

@end

Class OriginImageRequestHandlerCls(void) {
  return OriginImageRequestHandler.class;
}