API upload image

Add:
- utils/pickImage.ts
- service/upload-service.ts
- constants/directory-id.ts
- constants/base-url-api-strorage.ts

### No Issue

app/(application)/(user)/profile/[id]/update-photo.tsx

@@ -6,42 +6,109 @@ import {
   ButtonCustom,
 } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { router, useLocalSearchParams } from "expo-router";
+import API_STRORAGE from "@/constants/base-url-api-strorage";
+import DIRECTORY_ID from "@/constants/directory-id";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import { apiProfile } from "@/service/api-client/api-profile";
+import { uploadImageService } from "@/service/upload-service";
+import { IProfile } from "@/types/Type-Profile";
+import pickImage from "@/utils/pickImage";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import { Image } from "react-native";
 
 export default function UpdatePhotoProfile() {
   const { id } = useLocalSearchParams();
+  const [data, setData] = useState<IProfile>();
+  const [imageUri, setImageUri] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(id as string);
+    }, [id])
+  );
+
+  async function onLoadData(id: string) {
+    try {
+      const response = await apiProfile({ id });
+      console.log(
+        "response image id >>",
+        JSON.stringify(response.data.imageId, null, 2)
+      );
+      setData(response.data);
+    } catch (error) {
+      console.log("error get profile >>", error);
+    }
+  }
+
+  async function onUpload() {
+    try {
+      setIsLoading(true);
+
+      const response = await uploadImageService({
+        imageUri,
+        dirId: DIRECTORY_ID.profile_foto,
+      });
+
+      console.log("Upload res >>", JSON.stringify(response, null, 2));
+      if (response.success) {
+        router.back();
+      }
+    } catch (error) {
+      console.log("error upload >>", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
   const buttonFooter = (
     <BoxButtonOnFooter>
       <ButtonCustom
+        isLoading={isLoading}
         onPress={() => {
-          console.log("Simpan foto profile >>", id);
-          router.back();
+          onUpload();
+          // console.log("Simpan foto profile >>", id);
+          // router.back();
         }}
       >
-        Simpan
+        Update
       </ButtonCustom>
     </BoxButtonOnFooter>
   );
+
+  const image = imageUri ? (
+    <Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} />
+  ) : (
+    <AvatarCustom
+      size="xl"
+      source={
+        data?.imageId
+          ? API_STRORAGE.GET({ fileId: data.imageId })
+          : DUMMY_IMAGE.avatar
+      }
+    />
+  );
+
   return (
     <ViewWrapper footerComponent={buttonFooter}>
       <BaseBox
         style={{ alignItems: "center", justifyContent: "center", height: 250 }}
       >
-        <AvatarCustom size="xl" />
+        {image}
       </BaseBox>
 
+      {/* Upload Image */}
       <ButtonCenteredOnly
         icon="upload"
         onPress={() => {
-          console.log("Update photo >>", id);
-          router.navigate(`/(application)/take-picture/${id}`);
+          pickImage({
+            setImageUri,
+          });
         }}
       >
-        Update
+        Upload
       </ButtonCenteredOnly>
-
-      {/* <Spacing />
-      <ButtonCustom>Test</ButtonCustom> */}
     </ViewWrapper>
   );
 }

app/(application)/coba/button-upload.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { ButtonCustom } from "@/components";
+import pickImage from "@/utils/pickImage";
+import { Feather } from "@expo/vector-icons";
+import * as ImagePicker from "expo-image-picker";
+import { Alert } from "react-native";
+
+// Daftar ekstensi yang diperbolehkan
+const ALLOWED_EXTENSIONS = ["jpg", "jpeg", "png"];
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+
+export default function ButtonUpload({
+  setImageUri,
+}: {
+  setImageUri: (uri: string) => void;
+}) {
+  const pickImg = async () => {
+    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+    if (status !== "granted") {
+      Alert.alert(
+        "Permission Denied",
+        "You need to grant permission to access your media library"
+      );
+      return;
+    }
+
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      allowsEditing: true,
+      aspect: [4, 3],
+      quality: 1,
+    });
+
+    if (result.canceled || !result.assets[0]?.uri) {
+      return;
+    }
+
+    const uri = result.assets[0].uri;
+    const filename = uri.split("/").pop()?.toLowerCase() || "";
+    const match = /\.(\w+)$/.exec(filename);
+    const extension = match ? match[1] : "";
+
+    // Validasi ekstensi
+    if (!extension || !ALLOWED_EXTENSIONS.includes(extension)) {
+      Alert.alert(
+        "File Tidak Valid",
+        "Hanya file JPG, JPEG, dan PNG yang diperbolehkan."
+      );
+      return;
+    }
+
+    // Opsional: Validasi ukuran file (jika metadata tersedia)
+    // Catatan: Di Expo, `file.size` mungkin tidak tersedia di semua platform
+    const asset = result.assets[0];
+    if (asset.fileSize && asset.fileSize > MAX_FILE_SIZE) {
+      Alert.alert("File Terlalu Besar", "Ukuran file maksimal adalah 5MB.");
+      return;
+    }
+
+    // Jika lolos validasi, simpan URI
+    setImageUri(uri);
+  };
+
+  return (
+    <ButtonCustom
+      iconLeft={<Feather name="upload" size={14} color="black" />}
+      style={{
+        width: 120,
+        margin: "auto",
+      }}
+      onPress={() => {
+        pickImage({
+          setImageUri,
+        });
+      }}
+    >
+      Upload
+    </ButtonCustom>
+  );
+}

app/(application)/coba/index.tsx

@@ -1,184 +1,39 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
+import { Stack } from "expo-router";
 import React from "react";
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  Dimensions,
-  ScrollView,
-} from "react-native";
-import { Ionicons } from "@expo/vector-icons";
-import { router, Stack } from "expo-router";
-import EventDetailScreen from "./double-scroll";
-import LeftButtonCustom from "@/components/Button/BackButton";
-import CustomUploadButton from "./upload-button";
+import { Dimensions, StyleSheet } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
+import ScreenViewImage from "./screen-view-image";
 
 const { width } = Dimensions.get("window");
 
-// Sample Screen Components
-const HomeScreen = () => (
-  <View style={styles.screen}>
-    <Text style={styles.screenTitle}>Selamat Datang!</Text>
-    <Text style={styles.screenText}>
-      Ini adalah halaman utama aplikasi Anda
-    </Text>
-  </View>
-);
-const SearchScreen = () => (
-  <View style={styles.screen}>
-    <Text style={styles.screenTitle}>Search Screen</Text>
-    <Text style={styles.screenText}>Cari apa yang Anda butuhkan</Text>
-  </View>
-);
-
-const ProfileScreen = () => (
-  <View style={styles.screen}>
-    <Text style={styles.screenTitle}>Profile Screen</Text>
-    <Text style={styles.screenText}>Informasi profil pengguna</Text>
-  </View>
-);
-
-const NotificationScreen = () => (
-  <View style={styles.screen}>
-    {Array.from({ length: 10 }).map((_, index) => (
-      <View key={index}>
-        <Text style={styles.screenTitle}>Notifications</Text>
-        <Text style={styles.screenText}>Notifikasi terbaru Anda</Text>
-      </View>
-    ))}
-  </View>
-);
-
-// Custom Tab Component
-const CustomTab = ({ icon, label, isActive, onPress }: any) => (
-  <TouchableOpacity
-    style={[styles.tabItem, isActive && styles.activeTab]}
-    onPress={onPress}
-    activeOpacity={0.7}
-  >
-    <View
-      style={[styles.iconContainer, isActive && styles.activeIconContainer]}
-    >
-      <Ionicons name={icon} size={24} color={isActive ? "#fff" : "#666"} />
-    </View>
-    <Text style={[styles.tabLabel, isActive && styles.activeTabLabel]}>
-      {label}
-    </Text>
-    {isActive && <View style={styles.activeIndicator} />}
-  </TouchableOpacity>
-);
-
 // Main Custom Tab Navigator
 const CustomTabNavigator = () => {
-  const [activeTab, setActiveTab] = React.useState("home");
-  const [showHome, setShowHome] = React.useState(true);
-
-  const tabs = [
-    {
-      id: "search",
-      icon: "search-outline",
-      activeIcon: "search",
-      label: "Event",
-      component: SearchScreen,
-      path: "/event",
-    },
-    {
-      id: "notifications",
-      icon: "notifications-outline",
-      activeIcon: "notifications",
-      label: "Forum",
-      component: NotificationScreen,
-      path: "/forum",
-    },
-    {
-      id: "profile",
-      icon: "person-outline",
-      activeIcon: "person",
-      label: "Katalog",
-      component: ProfileScreen,
-      path: "/profile",
-    },
-  ];
-
-  // Function untuk handle tab press
-  const handleTabPress = (tabId: string) => {
-    setActiveTab(tabId);
-    setShowHome(false); // Hide home when any tab is pressed
-  };
-
-  // Determine which component to show
-  const getActiveComponent = () => {
-    if (showHome || activeTab === "home") {
-      return HomeScreen;
-    }
-    // const selectedTab = tabs.find((tab) => tab.id === activeTab);
-    // return selectedTab ? selectedTab.component : HomeScreen;
-    return HomeScreen;
-  };
-
-  const ActiveComponent = getActiveComponent();
-
-  const handleImageUpload = (file: any) => {
-    console.log("Gambar dipilih:", file);
-    // Upload ke server
-  };
-
-  const handlePdfOrPngUpload = (file: any) => {
-    console.log("PDF atau PNG dipilih:", file);
-  };
-
   return (
     <>
       <SafeAreaView edges={["bottom"]} style={styles.container}>
         <Stack.Screen
           options={{
-            title: "Custom Tab Navigator",
+            title: "Tampilan Percobaan",
           }}
         />
-        <EventDetailScreen />
+        <ScreenViewImage />
+        {/* <ScreenUpload/> */}
+        {/* <EventDetailScreen /> */}
 
-        <CustomUploadButton
+        {/* <CustomUploadButton
           allowedExtensions={["jpeg", "png"]}
           buttonTitle="Unggah Gambar (JPEG/PNG)"
           onFileSelected={handleImageUpload}
-        />
+        /> */}
 
         {/* Hanya PDF atau PNG */}
-        <CustomUploadButton
+        {/* <CustomUploadButton
           allowedExtensions={["pdf"]}
           buttonTitle="Unggah PDF atau PNG"
           onFileSelected={handlePdfOrPngUpload}
-        />
+        /> */}
       </SafeAreaView>
     </>
-    // <View style={styles.container}>
-    //   {/* Content Area */}
-    //   <ScrollView>
-    //     <View style={styles.content}>
-    //       <ActiveComponent />
-    //     </View>
-    //   </ScrollView>
-
-    //   {/* Custom Tab Bar */}
-    //   <View style={styles.tabBar}>
-    //     <View style={styles.tabContainer}>
-    //       {tabs.map((e) => (
-    //         <CustomTab
-    //           key={e.id}
-    //           icon={activeTab === e.id ? e.activeIcon : e.icon}
-    //           label={e.label}
-    //           isActive={activeTab === e.id && !showHome}
-    //           onPress={() => {
-    //             handleTabPress(e.id);
-    //             router.push(e.path as any);
-    //           }}
-    //         />
-    //       ))}
-    //     </View>
-    //   </View>
-    // </View>
   );
 };
 

app/(application)/coba/screen-upload.tsx

@@ -0,0 +1,74 @@
+import {
+  AvatarCustom,
+  BoxButtonOnFooter,
+  ButtonCustom,
+  StackCustom,
+  ViewWrapper,
+} from "@/components";
+import DIRECTORY_ID from "@/constants/directory-id";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import { uploadImageService } from "@/service/upload-service";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { router } from "expo-router";
+import { useState } from "react";
+import { View } from "react-native";
+import ButtonUpload from "./button-upload";
+
+export default function ScreenUpload() {
+  const [imageUri, setImageUri] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  async function onUpload() {
+    setIsLoading(true);
+    try {
+      const response = await uploadImageService({
+        imageUri,
+        dirId: DIRECTORY_ID.profile_foto,
+      });
+
+      console.log("Response", JSON.stringify(response, null, 2));
+      if (response.success) {
+        await AsyncStorage.setItem("idImage", response.data.id);
+        router.back();
+      }
+    } catch (error) {
+      console.log("Error", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  async function buttonUpload() {
+    return (
+      <>
+        <BoxButtonOnFooter>
+          <ButtonCustom isLoading={isLoading} onPress={() => onUpload()}>
+            Simpan
+          </ButtonCustom>
+        </BoxButtonOnFooter>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <ViewWrapper footerComponent={buttonUpload()}>
+        <StackCustom>
+          <View
+            style={{
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <AvatarCustom
+              source={imageUri ? { uri: imageUri } : DUMMY_IMAGE.avatar}
+              size="xl"
+            />
+          </View>
+
+          <ButtonUpload setImageUri={setImageUri} />
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/coba/screen-view-image.tsx

@@ -0,0 +1,73 @@
+/* eslint-disable no-unused-expressions */
+import { ButtonCustom, StackCustom, ViewWrapper } from "@/components";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { router, useFocusEffect } from "expo-router";
+import { useCallback, useState } from "react";
+import { ActivityIndicator, Image } from "react-native";
+
+export default function ScreenViewImage() {
+  const [dataId, setDataId] = useState<string | null>(null);
+  useFocusEffect(
+    useCallback(() => {
+      AsyncStorage.getItem("idImage").then((id) => {
+        setDataId(id || null);
+      });
+    }, [])
+  );
+
+  return (
+    <ViewWrapper>
+      <StackCustom>
+        {dataId ? (
+          <Image
+            onLoad={() => {
+              <ActivityIndicator size="large" />
+            }}
+            source={{ uri: APIs.GET({ fileId: dataId }) }}
+            style={{
+              width: 200,
+              height: 200,
+              margin: "auto",
+            }}
+          />
+        ) : (
+          <Image
+            source={DUMMY_IMAGE.avatar}
+            style={{
+              width: 200,
+              height: 200,
+              margin: "auto",
+            }}
+          />
+        )}
+
+        <ButtonCustom onPress={async () => {
+            await AsyncStorage.removeItem("idImage");
+            router.push("/coba/screen-upload");
+        }}>
+          Upload image
+        </ButtonCustom>
+      </StackCustom>
+    </ViewWrapper>
+  );
+}
+
+const APIs = {
+  /**
+   *
+   * @param fileId | file id from wibu storage , atau bisa disimpan di DB
+   * @param size | file size 10 - 1000 , tergantung ukuran file dan kebutuhan saar di tampilkan
+   * @type {string}
+   */
+  GET: ({ fileId, size }: { fileId: string; size?: string }) =>
+    size
+      ? `https://wibu-storage.wibudev.com/api/files/${fileId}-size-${size}`
+      : `https://wibu-storage.wibudev.com/api/files/${fileId}`,
+
+  /**
+   * @type {string}
+   * @returns alamat API dari wibu storage
+   */
+  GET_NO_PARAMS: "https://wibu-storage.wibudev.com/api/files/",
+};

app/(application)/coba/upload-image.tsx

@@ -0,0 +1,131 @@
+import { apiConfig } from "@/service/api-config";
+import * as ImagePicker from "expo-image-picker";
+import { useState } from "react";
+import {
+  ActivityIndicator,
+  Alert,
+  Button,
+  Image,
+  Text,
+  View,
+} from "react-native";
+
+// Daftar ekstensi yang diperbolehkan
+const ALLOWED_EXTENSIONS = ["jpg", "jpeg", "png"];
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+
+export default function UploadImage() {
+  const [imageUri, setImageUri] = useState<string | null>(null);
+  const [uploading, setUploading] = useState(false);
+
+  const pickImage = async () => {
+    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+    if (status !== "granted") {
+      Alert.alert(
+        "Permission Denied",
+        "You need to grant permission to access your media library"
+      );
+      return;
+    }
+
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      allowsEditing: true,
+      aspect: [1, 1],
+      quality: 1,
+    });
+
+    if (result.canceled || !result.assets[0]?.uri) {
+      return;
+    }
+
+    const uri = result.assets[0].uri;
+    const filename = uri.split("/").pop()?.toLowerCase() || "";
+    const match = /\.(\w+)$/.exec(filename);
+    const extension = match ? match[1] : "";
+
+    // Validasi ekstensi
+    if (!extension || !ALLOWED_EXTENSIONS.includes(extension)) {
+      Alert.alert(
+        "File Tidak Valid",
+        "Hanya file JPG, JPEG, dan PNG yang diperbolehkan."
+      );
+      return;
+    }
+
+    // Opsional: Validasi ukuran file (jika metadata tersedia)
+    // Catatan: Di Expo, `file.size` mungkin tidak tersedia di semua platform
+    const asset = result.assets[0];
+    if (asset.fileSize && asset.fileSize > MAX_FILE_SIZE) {
+      Alert.alert("File Terlalu Besar", "Ukuran file maksimal adalah 5MB.");
+      return;
+    }
+
+    // Jika lolos validasi, simpan URI
+    setImageUri(uri);
+  };
+
+  const uploadImage = async () => {
+    if (!imageUri) return;
+
+    setUploading(true);
+
+    const uri = imageUri;
+    const filename = uri.split("/").pop();
+    const match = /\.(\w+)$/.exec(filename || "");
+    const type = match ? `image/${match[1]}` : "image";
+    const dirId = "cmeryhudo016lbpnn3vlhnufq";
+
+    const formData = new FormData();
+    // @ts-ignore: React Native tidak mengenal Blob secara langsung
+    formData.append("file", {
+      uri,
+      name: filename,
+      type,
+    });
+    formData.append("dirId", dirId);
+
+    try {
+      const response = await apiConfig.post("/mobile/upload", formData, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+        timeout: 30000,
+      });
+
+      console.log("Response", JSON.stringify(response.data, null, 2));
+    } catch (error) {
+      console.log("Error", error);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  return (
+    <View style={{ flex: 1, padding: 20, justifyContent: "center" }}>
+      <Button title="Pilih Gambar" onPress={pickImage} />
+
+      {imageUri && (
+        <Image
+          source={{ uri: imageUri }}
+          style={{ width: 300, height: 300, margin: "auto" }}
+        />
+      )}
+
+      {imageUri && !uploading && (
+        <Button
+          title="Unggah Gambar"
+          onPress={uploadImage}
+          disabled={uploading}
+        />
+      )}
+
+      {uploading && (
+        <View style={{ marginTop: 20 }}>
+          <ActivityIndicator size="large" color="#0000ff" />
+          <Text>Mengunggah...</Text>
+        </View>
+      )}
+    </View>
+  );
+}

app/(application)/coba/upload-service.ts

@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { apiConfig } from "@/service/api-config";
+import Toast from "react-native-toast-message";
+
+export async function tryUploadService({
+  dirId,
+  imageUri,
+}: {
+  dirId: string;
+  imageUri: string | null;
+}) {
+  if (!imageUri) {
+    Toast.show({
+      type: "error",
+      text1: "Gagal",
+      text2: "Harap pilih gambar terlebih dahulu",
+    });
+    return;
+  }
+
+  try {
+    const uri = imageUri;
+    const filename = uri.split("/").pop();
+    const match = /\.(\w+)$/.exec(filename || "");
+    const type = match ? `image/${match[1]}` : "image";
+
+    const formData = new FormData();
+    // @ts-ignore: React Native tidak mengenal Blob secara langsung
+    formData.append("file", {
+      uri,
+      name: filename,
+      type,
+    });
+    formData.append("dirId", dirId);
+
+    const response = await apiConfig.post("/mobile/upload", formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+      timeout: 30000,
+    });
+
+    console.log("Response", JSON.stringify(response.data, null, 2));
+    const { data } = response;
+
+    if (!data.success) {
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: data.message,
+      });
+
+      return;
+    }
+
+    Toast.show({
+      type: "success",
+      text1: "File berhasil diunggah",
+    });
+
+    return data;
+  } catch (error) {
+    Toast.show({
+      type: "error",
+      text1: "File gagal diunggah",
+    });
+  }
+}