✅ Fix "Download CAR file" on mobile (#3816)

* download CAR file using AtpAgent instead of building URL

* add loader icon on download car button

* actually save to disk on android

* style nits

* bottom margin nit

* localize toast

* remove fallback so back button works correctly

* keep throwing an error if mime type isn't used

* be more explicit with toasts

* send errors to sentry when encountered

---------

Co-authored-by: Hailey <me@haileyok.com>

src/lib/api/api-polyfill.ts

@@ -1,5 +1,5 @@
-import {BskyAgent, stringifyLex, jsonToLex} from '@atproto/api'
 import RNFS from 'react-native-fs'
+import {BskyAgent, jsonToLex, stringifyLex} from '@atproto/api'
 
 const GET_TIMEOUT = 15e3 // 15s
 const POST_TIMEOUT = 60e3 // 60s
@@ -68,8 +68,10 @@ async function fetchHandler(
       resBody = jsonToLex(await res.json())
     } else if (resMimeType.startsWith('text/')) {
       resBody = await res.text()
+    } else if (resMimeType === 'application/vnd.ipld.car') {
+      resBody = await res.arrayBuffer()
     } else {
-      throw new Error('TODO: non-textual response body')
+      throw new Error('Non-supported mime type')
     }
   }
 

src/lib/media/manip.ts

@@ -1,12 +1,23 @@
 import {Image as RNImage, Share as RNShare} from 'react-native'
 import {Image} from 'react-native-image-crop-picker'
 import uuid from 'react-native-uuid'
-import {cacheDirectory, copyAsync, deleteAsync} from 'expo-file-system'
+import {
+  cacheDirectory,
+  copyAsync,
+  deleteAsync,
+  documentDirectory,
+  EncodingType,
+  makeDirectoryAsync,
+  StorageAccessFramework,
+  writeAsStringAsync,
+} from 'expo-file-system'
 import * as MediaLibrary from 'expo-media-library'
 import * as Sharing from 'expo-sharing'
 import ImageResizer from '@bam.tech/react-native-image-resizer'
+import {Buffer} from 'buffer'
 import RNFetchBlob from 'rn-fetch-blob'
 
+import {logger} from '#/logger'
 import {isAndroid, isIOS} from 'platform/detection'
 import {Dimensions} from './types'
 
@@ -240,3 +251,64 @@ function normalizePath(str: string, allPlatforms = false): string {
   }
   return str
 }
+
+export async function saveBytesToDisk(
+  filename: string,
+  bytes: Uint8Array,
+  type: string,
+) {
+  const encoded = Buffer.from(bytes).toString('base64')
+  return await saveToDevice(filename, encoded, type)
+}
+
+export async function saveToDevice(
+  filename: string,
+  encoded: string,
+  type: string,
+) {
+  try {
+    if (isIOS) {
+      const tmpFileUrl = await withTempFile(filename, encoded)
+      await Sharing.shareAsync(tmpFileUrl, {UTI: type})
+      safeDeleteAsync(tmpFileUrl)
+      return true
+    } else {
+      const permissions =
+        await StorageAccessFramework.requestDirectoryPermissionsAsync()
+
+      if (!permissions.granted) {
+        return false
+      }
+
+      const fileUrl = await StorageAccessFramework.createFileAsync(
+        permissions.directoryUri,
+        filename,
+        type,
+      )
+
+      await writeAsStringAsync(fileUrl, encoded, {
+        encoding: EncodingType.Base64,
+      })
+      return true
+    }
+  } catch (e) {
+    logger.error('Error occurred while saving file', {message: e})
+    return false
+  }
+}
+
+async function withTempFile(
+  filename: string,
+  encoded: string,
+): Promise<string> {
+  // Using a directory so that the file name is not a random string
+  // documentDirectory will always be available on native, so we assert as a string.
+  const tmpDirUri = joinPath(documentDirectory as string, String(uuid.v4()))
+  await makeDirectoryAsync(tmpDirUri, {intermediates: true})
+
+  const tmpFileUrl = joinPath(tmpDirUri, filename)
+  await writeAsStringAsync(tmpFileUrl, encoded, {
+    encoding: EncodingType.Base64,
+  })
+  return tmpFileUrl
+}

src/lib/media/manip.web.ts

@@ -1,6 +1,7 @@
-import {Dimensions} from './types'
 import {Image as RNImage} from 'react-native-image-crop-picker'
-import {getDataUriSize, blobToDataUri} from './util'
+
+import {Dimensions} from './types'
+import {blobToDataUri, getDataUriSize} from './util'
 
 export async function compressIfNeeded(
   img: RNImage,
@@ -138,3 +139,23 @@ function createResizedImage(
     img.src = dataUri
   })
 }
+
+export async function saveBytesToDisk(
+  filename: string,
+  bytes: Uint8Array,
+  type: string,
+) {
+  const blob = new Blob([bytes], {type})
+  const url = URL.createObjectURL(blob)
+  await downloadUrl(url, filename)
+  // Firefox requires a small delay
+  setTimeout(() => URL.revokeObjectURL(url), 100)
+  return true
+}
+
+async function downloadUrl(href: string, filename: string) {
+  const a = document.createElement('a')
+  a.href = href
+  a.download = filename
+  a.click()
+}