fix: images posted to server via fetch get their size inflated significantly for iOS (#6749)

* fix: file size for iOS

* chore: add info about problem/hack in Hacks.md

Author: dimatretyak

HACKS.md

@@ -351,3 +351,15 @@ When we upgrade to a react native version that contentOffset works for android
 
 contentOffset for vertical scrollviews appear to be broken on v0.66.4 (current version). We need the contentOffset to initially hide the HeaderComponent. The workaround currently is to use contentContainerStyle and set the marginTop to -HeightOfHeaderComponent and then remove this when a user scrolls to the top.
 Caveat/Introduced bug: User has to scroll to an offset of any number > 0 to revert the marginTop to 0.
+
+## [iOS specific bug]: Images posted to server via fetch in `multipart/form-data` get their size inflated significantly
+
+#### When we can remove this:
+
+When this problem will be fixed in one of the next React Native releases (fixes were already added in 0.66.4, but were eventually [reversed](https://github.com/facebook/react-native/commit/e83feffeba567b4e304181632128ee1caa036c45))
+
+#### Explanation/Context
+
+When we try to upload a file with the `.jpg` extension in `multipart/form-data` format via `fetch`, then the size of this file will be increased on iOS. That bug happens not due to the file content nor for the blob MIME but just due to the file extension. See more about this problem [here](https://github.com/facebook/react-native/issues/27099).
+
+One of the simplest solutions to this problem is to rename the file and add a suffix (for example, from `filename.jpg` to `filename.jpg.toUpload`)

src/app/Scenes/ReverseSearchImageResults/ReverseSearchImageResults.tsx

@@ -10,9 +10,10 @@ import { resizeImage } from "app/utils/resizeImage"
 import { ReactNativeFile } from "extract-files"
 import { Box, Button, Screen, Text } from "palette"
 import { useState } from "react"
-import { Alert } from "react-native"
+import { Alert, Platform } from "react-native"
 import { graphql } from "react-relay"
 import { fetchQuery } from "relay-runtime"
+import RNFetchBlob from "rn-fetch-blob"
 import { ReverseSearchImageResultItemFragmentContainer } from "./ReverseSearchImageResultItem"
 
 type SearchImageResults = NonNullable<
@@ -50,6 +51,25 @@ export const ReverseSearchImageResults = () => {
         quality: 85,
         onlyScaleDown: true,
       })
+
+      /**
+       * Images posted to server via fetch get their size inflated significantly for iOS.
+       * This is a small hack to solve this problem
+       *
+       * You can find more context here: https://github.com/facebook/react-native/issues/27099
+       */
+      if (Platform.OS === "ios") {
+        const updatedPath = replaceFilenameInValue(resizedImage.path, resizedImage.name)
+        const updatedURI = replaceFilenameInValue(resizedImage.uri, resizedImage.name)
+        const updatedFilename = replaceFilenameInValue(resizedImage.name, resizedImage.name)
+
+        await RNFetchBlob.fs.mv(resizedImage.path, updatedPath)
+
+        resizedImage.path = updatedPath
+        resizedImage.uri = updatedURI
+        resizedImage.name = updatedFilename
+      }
+
       const fileImage = new ReactNativeFile({
         uri: resizedImage.uri,
         name: resizedImage.name,
@@ -116,3 +136,7 @@ export const ReverseSearchImageResults = () => {
     </Screen>
   )
 }
+
+const replaceFilenameInValue = (value: string, filename: string) => {
+  return value.replace(filename, `${filename}.toUpload`)
+}