Feature: Add support for uploading images and automatically inferring their tags (#2)

* feature: Experimental support for asset uploads

* feature(web): Add new bookmark type asset

* feature: Add support for automatically tagging images

* fix: Add support for image assets in preview page

* use next Image for fetching the images

* Fix auth and error codes in the route handlers

* Add support for image uploads on mobile

* Fix typing of upload requests

* Remove the ugly dragging box

* Bump mobile version to 1.3

* Change the editor card placeholder to mention uploading images

* Fix a typo

* Change ios icon for photo library

* Silence typescript error

1 files changed, 34 insertions, 2 deletions

diff --git a/apps/mobile/app/dashboard/(tabs)/index.tsx b/apps/mobile/app/dashboard/(tabs)/index.tsx
index 7f70af6b..a840ca93 100644
--- a/apps/mobile/app/dashboard/(tabs)/index.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/index.tsx
@@ -1,21 +1,45 @@
 import { Platform, SafeAreaView, View } from "react-native";
 import * as Haptics from "expo-haptics";
+import * as ImagePicker from "expo-image-picker";
 import { useRouter } from "expo-router";
 import BookmarkList from "@/components/bookmarks/BookmarkList";
 import PageTitle from "@/components/ui/PageTitle";
+import useAppSettings from "@/lib/settings";
+import { useUploadAsset } from "@/lib/upload";
 import { MenuView } from "@react-native-menu/menu";
 import { SquarePen } from "lucide-react-native";
+import { useToast } from "@/components/ui/Toast";
 
 function HeaderRight() {
+  const {toast} = useToast();
   const router = useRouter();
+  const { settings } = useAppSettings();
+  const { uploadAsset } = useUploadAsset(settings, {
+    onError: (e) => {
+      toast({message: e, variant: "destructive"});
+    },
+  });
   return (
     <MenuView
-      onPressAction={({ nativeEvent }) => {
+      onPressAction={async ({ nativeEvent }) => {
         Haptics.selectionAsync();
         if (nativeEvent.event === "note") {
           router.navigate("dashboard/add-note");
         } else if (nativeEvent.event === "link") {
           router.navigate("dashboard/add-link");
+        } else if (nativeEvent.event === "library") {
+          const result = await ImagePicker.launchImageLibraryAsync({
+            mediaTypes: ImagePicker.MediaTypeOptions.Images,
+            quality: 0,
+            allowsMultipleSelection: false,
+          });
+          if (!result.canceled) {
+            uploadAsset({
+              type: result.assets[0].mimeType ?? "",
+              name: result.assets[0].fileName ?? "",
+              uri: result.assets[0].uri,
+            });
+          }
         }
       }}
       actions={[
@@ -31,10 +55,18 @@ function HeaderRight() {
           id: "note",
           title: "New Note",
           image: Platform.select({
-            ios: "note",
+            ios: "note.text",
             android: "ic_menu_note",
           }),
         },
+        {
+          id: "library",
+          title: "Photo Library",
+          image: Platform.select({
+            ios: "photo",
+            android: "ic_menu_photo",
+          }),
+        },
       ]}
       shouldOpenOnLongPress={false}
     >