diff options
| author | MohamedBassem <me@mbassem.com> | 2025-01-18 21:59:52 +0000 |
|---|---|---|
| committer | MohamedBassem <me@mbassem.com> | 2025-01-18 21:59:52 +0000 |
| commit | 219e16a0bd8e0aaa7cbba24fc5e758e9f719907c (patch) | |
| tree | f6851a97baf2491fd827da93529710b9b6f551f9 /apps/mobile | |
| parent | bbbf33536c6c1a73fdfe76c42ff19cd08aabcc6f (diff) | |
| download | karakeep-219e16a0bd8e0aaa7cbba24fc5e758e9f719907c.tar.zst | |
fix(mobile): Use external blob encoder to fix mobile image uploads. Fixes #800
Diffstat (limited to 'apps/mobile')
| -rw-r--r-- | apps/mobile/lib/upload.ts | 32 | ||||
| -rw-r--r-- | apps/mobile/package.json | 1 |
2 files changed, 18 insertions, 15 deletions
diff --git a/apps/mobile/lib/upload.ts b/apps/mobile/lib/upload.ts index b31faa90..715119b1 100644 --- a/apps/mobile/lib/upload.ts +++ b/apps/mobile/lib/upload.ts @@ -1,3 +1,4 @@ +import ReactNativeBlobUtil from "react-native-blob-util"; import { useMutation } from "@tanstack/react-query"; import { BookmarkTypes, ZBookmark } from "@hoarder/shared/types/bookmarks"; @@ -36,23 +37,24 @@ export function useUploadAsset( const { mutate: uploadAsset, isPending: isUploading } = useMutation({ mutationFn: async (file: { type: string; name: string; uri: string }) => { - const formData = new FormData(); - // @ts-expect-error This is a valid api in react native - formData.append("file", { - uri: file.uri, - name: file.name, - type: file.type, - }); - const resp = await fetch(`${settings.address}/api/assets`, { - method: "POST", - body: formData, - headers: { + // There's a bug in the native FormData implementation (https://github.com/facebook/react-native/issues/44737) + // that will only get fixed in react native 0.77. Using the BlobUtil implementation for now. + const resp = await ReactNativeBlobUtil.fetch( + "POST", + `${settings.address}/api/assets`, + { Authorization: `Bearer ${settings.apiKey}`, + "Content-Type": "multipart/form-data", }, - }); - if (!resp.ok) { - throw new Error(await resp.text()); - } + [ + { + name: "file", + filename: file.name, + type: file.type, + data: ReactNativeBlobUtil.wrap(file.uri.replace("file://", "")), + }, + ], + ); return zUploadResponseSchema.parse(await resp.json()); }, onSuccess: (resp) => { diff --git a/apps/mobile/package.json b/apps/mobile/package.json index 2634bdd7..016531f1 100644 --- a/apps/mobile/package.json +++ b/apps/mobile/package.json @@ -44,6 +44,7 @@ "react": "^18.3.1", "react-native": "0.76.3", "react-native-awesome-slider": "^2.5.3", + "react-native-blob-util": "^0.21.2", "react-native-gesture-handler": "~2.21.2", "react-native-image-viewing": "^0.2.2", "react-native-markdown-display": "^7.0.2", |