fix ( upload image )

deskripsi:
- menyederhanakan upload image saat create profile

src/app/lib/id-derectory.ts

@@ -1,6 +1,6 @@
 const DIRECTORY_ID = {
-  profile_foto: "cm5ni43ub001pxpug0qw4p11e",
+  profile_foto: "cm0x93rgo000jbp5tj8baoaus",
-  profile_background: "cm5ni4hnq001l12p9gpagxgtv",
+  profile_background: "cm0x93ze8000lbp5t1a8uc9wl",
   portofolio_logo: "cm0yjl6ug000310njwmk6j0tx",
   map_pin: "cm0yjq8up000710njv5klra32",
   map_image: "cm0yjqnxl000910njplqho07w",

src/app_modules/_global/button/comp_button_upload_photo.tsx

@@ -32,10 +32,10 @@ export function ComponentGlobal_ButtonUploadFileImage({
 
           onSetFile(files);
           onSetImage(buffer);
-          setIsLoading(false);
         } catch (error) {
+          clientLogger.error("Upload image error:", error);
+        } finally {
           setIsLoading(false);
-          clientLogger.error("Upload error:", error);
         }
       }}
       accept="image/png,image/png,image/jpeg,image/gif"

src/app_modules/katalog/profile/_component/button/comp_create_new_profile.tsx

@@ -1,29 +1,31 @@
 "use client";
 
+import { DIRECTORY_ID } from "@/app/lib";
 import { RouterHome } from "@/app/lib/router_hipmi/router_home";
 import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
 import {
   ComponentGlobal_NotifikasiBerhasil,
   ComponentGlobal_NotifikasiGagal,
   ComponentGlobal_NotifikasiPeringatan,
 } from "@/app_modules/_global/notif_global";
 import { emailRegex } from "@/app_modules/katalog/component/regular_expressions";
+import { clientLogger } from "@/util/clientLogger";
 import { Button } from "@mantine/core";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import funCreateNewProfile from "../../fun/fun_create_profile";
 import { MODEL_PROFILE } from "../../model/interface";
-import { clientLogger } from "@/util/clientLogger";
 
 export function Profile_ComponentCreateNewProfile({
   value,
-  fotoProfileId,
+  filePP,
-  backgroundProfileId,
+  fileBG,
 }: {
   value: MODEL_PROFILE;
-  fotoProfileId: string;
+  filePP: File;
-  backgroundProfileId: string;
+  fileBG: File;
 }) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
@@ -40,19 +42,42 @@ export function Profile_ComponentCreateNewProfile({
     if (!newData.email.match(emailRegex))
       return ComponentGlobal_NotifikasiPeringatan("Format email salah");
 
-    if (fotoProfileId == "")
+    if (filePP == null)
       return ComponentGlobal_NotifikasiPeringatan("Lengkapi foto profile");
-    if (backgroundProfileId == null)
+    if (fileBG == null)
       return ComponentGlobal_NotifikasiPeringatan(
         "Lengkapi background profile"
       );
 
     try {
       setLoading(true);
+
+      const uploadPhoto = await funGlobal_UploadToStorage({
+        file: filePP,
+        dirId: DIRECTORY_ID.profile_foto,
+      });
+
+      if (!uploadPhoto.success) {
+        setLoading(false);
+        ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+        return;
+      }
+
+      const uploadBackground = await funGlobal_UploadToStorage({
+        file: fileBG,
+        dirId: DIRECTORY_ID.profile_background,
+      });
+
+      if (!uploadBackground.success) {
+        setLoading(false);
+        ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+        return;
+      }
+
       const create = await funCreateNewProfile({
         data: newData as any,
-        imageId: fotoProfileId,
+        imageId: uploadPhoto.data.id,
-        imageBackgroundId: backgroundProfileId,
+        imageBackgroundId: uploadBackground.data.id,
       });
 
       if (create.status === 201) {
@@ -61,16 +86,16 @@ export function Profile_ComponentCreateNewProfile({
       }
 
       if (create.status === 400) {
-        setLoading(true);
+        setLoading(false);
         ComponentGlobal_NotifikasiGagal(create.message);
       }
 
       if (create.status === 500) {
-        setLoading(true);
+        setLoading(false);
         ComponentGlobal_NotifikasiGagal(create.message);
       }
     } catch (error) {
-      setLoading(true);
+      setLoading(false);
       clientLogger.error("Error create new profile:", error);
     }
   }

src/app_modules/katalog/profile/create/view.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { MainColor } from "@/app_modules/_global/color";
 import { ComponentGlobal_ErrorInput } from "@/app_modules/_global/component";
 import { Select, Stack, TextInput } from "@mantine/core";
 import { IconAt } from "@tabler/icons-react";
@@ -8,13 +9,12 @@ import { emailRegex } from "../../component/regular_expressions";
 import { Profile_ComponentCreateNewProfile } from "../_component";
 import Profile_ViewUploadBackground from "./view_upload_background";
 import Profile_ViewUploadFoto from "./view_upload_foto";
-import { MainColor } from "@/app_modules/_global/color";
 
 export default function CreateProfile() {
+  const [filePP, setFilePP] = useState<File | null>(null);
   const [imgPP, setImgPP] = useState<any | null>();
+  const [fileBG, setFileBG] = useState<File | null>(null);
   const [imgBG, setImgBG] = useState<any | null>();
-  const [fotoProfileId, setFotoProfileId] = useState("");
-  const [backgroundProfileId, setBackgroundProfileId] = useState("");
 
   const [value, setValue] = useState({
     name: "",
@@ -29,15 +29,15 @@ export default function CreateProfile() {
         <Profile_ViewUploadFoto
           imgPP={imgPP}
           onSetImgPP={setImgPP}
-          fotoProfileId={fotoProfileId}
+          filePP={filePP}
-          onSetFotoProfileId={setFotoProfileId}
+          onSetFilePP={setFilePP}
         />
 
         <Profile_ViewUploadBackground
           imgBG={imgBG}
-          backgroundProfileId={backgroundProfileId}
           onSetImgBG={setImgBG}
-          onSetBackgroundProfileId={setBackgroundProfileId}
+          fileBG={fileBG}
+          onSetFileBG={setFileBG}
         />
 
         <Stack mb={"lg"}>
@@ -106,7 +106,7 @@ export default function CreateProfile() {
               label: { color: MainColor.white },
               input: { backgroundColor: MainColor.white },
               required: { color: MainColor.red },
-              dropdown: { backgroundColor: MainColor.white }
+              dropdown: { backgroundColor: MainColor.white },
             }}
             withAsterisk
             label="Jenis Kelamin"
@@ -125,8 +125,8 @@ export default function CreateProfile() {
 
           <Profile_ComponentCreateNewProfile
             value={value as any}
-            fotoProfileId={fotoProfileId}
+            filePP={filePP as File}
-            backgroundProfileId={backgroundProfileId}
+            fileBG={fileBG as File}
           />
         </Stack>
       </Stack>

src/app_modules/katalog/profile/create/view_upload_background.tsx

@@ -1,38 +1,28 @@
-import { DIRECTORY_ID } from "@/app/lib";
-import { MainColor } from "@/app_modules/_global/color";
 import {
   ComponentGlobal_BoxInformation,
   ComponentGlobal_BoxUploadImage,
+  ComponentGlobal_ButtonUploadFileImage,
 } from "@/app_modules/_global/component";
-import {
-  funGlobal_DeleteFileById,
-  funGlobal_UploadToStorage,
-} from "@/app_modules/_global/fun";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
-import { clientLogger } from "@/util/clientLogger";
 import {
   AspectRatio,
   Box,
-  Button,
   Center,
-  FileButton,
   Image,
-  Stack,
+  Stack
-  Text
 } from "@mantine/core";
-import { IconCamera, IconUpload } from "@tabler/icons-react";
+import { IconPhoto } from "@tabler/icons-react";
 import { useState } from "react";
 
 export default function Profile_ViewUploadBackground({
   imgBG,
   onSetImgBG,
-  backgroundProfileId,
+  fileBG,
-  onSetBackgroundProfileId,
+  onSetFileBG,
 }: {
   imgBG: string;
   onSetImgBG: (img: string | null) => void;
-  backgroundProfileId: string;
+  fileBG: File | null;
-  onSetBackgroundProfileId: (id: string) => void;
+  onSetFileBG: (file: File | null) => void;
 }) {
   const [isLoading, setLoading] = useState(false);
 
@@ -53,110 +43,16 @@ export default function Profile_ViewUploadBackground({
               </AspectRatio>
             ) : (
               <Stack justify="center" align="center" h={"100%"}>
-                <IconUpload color="white" />
+                <IconPhoto size={100} />
-                <Text fz={"xs"} c={"white"}>
-                  Upload Background
-                </Text>
               </Stack>
             )}
           </ComponentGlobal_BoxUploadImage>
 
           <Center>
-            <FileButton
+            <ComponentGlobal_ButtonUploadFileImage
-              onChange={async (files: any | null) => {
+              onSetFile={onSetFileBG}
-                try {
+              onSetImage={onSetImgBG}
-                  setLoading(true);
+            />
-                  const buffer = URL.createObjectURL(
-                    new Blob([new Uint8Array(await files.arrayBuffer())])
-                  );
-
-                  // if (files.size > MAX_SIZE) {
-                  //   ComponentGlobal_NotifikasiPeringatan(
-                  //     PemberitahuanMaksimalFile
-                  //   );
-                  //   onSetImgBG(null);
-
-                  //   return;
-                  // }
-
-                  if (backgroundProfileId != "") {
-                    const deleteFotoBg = await funGlobal_DeleteFileById({
-                      fileId: backgroundProfileId,
-                      dirId: DIRECTORY_ID.profile_background,
-                    });
-
-                    if (!deleteFotoBg.success) {
-                      clientLogger.error(
-                        "Client failed delete background:" +
-                          deleteFotoBg.message
-                      );
-                      return;
-                    }
-
-                    if (deleteFotoBg.success) {
-                      onSetBackgroundProfileId("");
-                      onSetImgBG(null);
-
-                      const uploadBackground = await funGlobal_UploadToStorage({
-                        file: files,
-                        dirId: DIRECTORY_ID.profile_background,
-                      });
-
-                      if (!uploadBackground.success) {
-                        clientLogger.error(
-                          "Client failed upload background:" +
-                            uploadBackground.message
-                        );
-                        return;
-                      }
-
-                      if (uploadBackground.success) {
-                        onSetBackgroundProfileId(uploadBackground.data.id);
-                        onSetImgBG(buffer);
-                      } else {
-                        ComponentGlobal_NotifikasiPeringatan(
-                          "Gagal upload background profile"
-                        );
-                      }
-                    }
-                  } else {
-                    const uploadBackground = await funGlobal_UploadToStorage({
-                      file: files,
-                      dirId: DIRECTORY_ID.profile_background,
-                    });
-
-                    if (uploadBackground.success) {
-                      onSetBackgroundProfileId(uploadBackground.data.id);
-                      onSetImgBG(buffer);
-                    } else {
-                      ComponentGlobal_NotifikasiPeringatan(
-                        "Gagal upload background profile"
-                      );
-                    }
-                  }
-                } catch (error) {
-                  clientLogger.error("Client error upload background:", error);
-                } finally {
-                  setLoading(false);
-                }
-              }}
-              accept="image/png,image/jpeg"
-            >
-              {(props) => (
-                <Button
-                  {...props}
-                  loading={isLoading}
-                  loaderPosition="center"
-                  radius={"xl"}
-                  leftIcon={<IconCamera />}
-                  bg={MainColor.yellow}
-                  color="yellow"
-                  c={"black"}
-                >
-                  Upload
-                </Button>
-              )}
-            </FileButton>
           </Center>
         </Stack>
       </Box>

src/app_modules/katalog/profile/create/view_upload_foto.tsx

@@ -1,42 +1,35 @@
-import { DIRECTORY_ID } from "@/app/lib";
 import { MainColor } from "@/app_modules/_global/color";
-import { ComponentGlobal_BoxInformation } from "@/app_modules/_global/component";
 import {
-  funGlobal_DeleteFileById,
+  ComponentGlobal_BoxInformation,
-  funGlobal_UploadToStorage,
+  ComponentGlobal_ButtonUploadFileImage,
-} from "@/app_modules/_global/fun";
+} from "@/app_modules/_global/component";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
-import { clientLogger } from "@/util/clientLogger";
 import {
   Avatar,
   Box,
-  Button,
   Center,
-  FileButton,
   Paper,
   Stack
 } from "@mantine/core";
-import { IconCamera } from "@tabler/icons-react";
 import { useState } from "react";
 
 export default function Profile_ViewUploadFoto({
   imgPP,
   onSetImgPP,
-  fotoProfileId,
+  filePP,
-  onSetFotoProfileId,
+  onSetFilePP,
 }: {
   imgPP: string | null | undefined;
   onSetImgPP: (img: string | null) => void;
-  fotoProfileId: string;
+  filePP: File | null;
-  onSetFotoProfileId: (id: string) => void;
+  onSetFilePP: (file: File | null) => void;
 }) {
-  const [isLoadingButton, setLoadingButton] = useState(false);
+  const [isLoading, setLoading] = useState(false);
 
   return (
     <>
       <Box>
         <Stack spacing={"lg"}>
-          <ComponentGlobal_BoxInformation informasi="Upload foto profile anda dengan ukuran maksimal file 3 MB." />
+          <ComponentGlobal_BoxInformation informasi="Upload foto profile anda." />
           <Center>
             {imgPP != undefined || imgPP != null ? (
               <Paper shadow="lg" radius={"100%"}>
@@ -70,6 +63,13 @@ export default function Profile_ViewUploadFoto({
           </Center>
 
           <Center>
+            <ComponentGlobal_ButtonUploadFileImage
+              onSetFile={onSetFilePP}
+              onSetImage={onSetImgPP}
+            />
+          </Center>
+
+          {/* <Center>
             <FileButton
               onChange={async (files: any | null) => {
                 try {
@@ -186,7 +186,7 @@ export default function Profile_ViewUploadFoto({
                 </Button>
               )}
             </FileButton>
-          </Center>
+          </Center> */}
         </Stack>
       </Box>
     </>