fix ( upload image )

deskripsi: - menyederhanakan upload image saat create profile
2025-01-13 15:57:25 +08:00
parent 40d69ffc99
commit cdc548885d
6 changed files with 80 additions and 159 deletions
--- a/src/app/lib/id-derectory.ts
+++ b/src/app/lib/id-derectory.ts
@@ -1,6 +1,6 @@
 const DIRECTORY_ID = {
-  profile_foto: "cm5ni43ub001pxpug0qw4p11e",
-  profile_background: "cm5ni4hnq001l12p9gpagxgtv",
+  profile_foto: "cm0x93rgo000jbp5tj8baoaus",
+  profile_background: "cm0x93ze8000lbp5t1a8uc9wl",
  portofolio_logo: "cm0yjl6ug000310njwmk6j0tx",
  map_pin: "cm0yjq8up000710njv5klra32",
  map_image: "cm0yjqnxl000910njplqho07w",
--- a/src/app_modules/_global/button/comp_button_upload_photo.tsx
+++ b/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"
--- a/src/app_modules/katalog/profile/_component/button/comp_create_new_profile.tsx
+++ b/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,
-  backgroundProfileId,
+  filePP,
+  fileBG,
 }: {
  value: MODEL_PROFILE;
-  fotoProfileId: string;
-  backgroundProfileId: string;
+  filePP: File;
+  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,
-        imageBackgroundId: backgroundProfileId,
+        imageId: uploadPhoto.data.id,
+        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);
    }
  }
--- a/src/app_modules/katalog/profile/create/view.tsx
+++ b/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}
-          onSetFotoProfileId={setFotoProfileId}
+          filePP={filePP}
+          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}
-            backgroundProfileId={backgroundProfileId}
+            filePP={filePP as File}
+            fileBG={fileBG as File}
          />
        </Stack>
      </Stack>
--- a/src/app_modules/katalog/profile/create/view_upload_background.tsx
+++ b/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,
-  Text
+  Stack
 } 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,
-  onSetBackgroundProfileId,
+  fileBG,
+  onSetFileBG,
 }: {
  imgBG: string;
  onSetImgBG: (img: string | null) => void;
-  backgroundProfileId: string;
-  onSetBackgroundProfileId: (id: string) => void;
+  fileBG: File | null;
+  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" />
-                <Text fz={"xs"} c={"white"}>
-                  Upload Background
-                </Text>
+                <IconPhoto size={100} />
              </Stack>
            )}
          </ComponentGlobal_BoxUploadImage>

          <Center>
-            <FileButton
-              onChange={async (files: any | null) => {
-                try {
-                  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>
+            <ComponentGlobal_ButtonUploadFileImage
+              onSetFile={onSetFileBG}
+              onSetImage={onSetImgBG}
+            />
          </Center>
        </Stack>
      </Box>
--- a/src/app_modules/katalog/profile/create/view_upload_foto.tsx
+++ b/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,
-  funGlobal_UploadToStorage,
-} from "@/app_modules/_global/fun";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
-import { clientLogger } from "@/util/clientLogger";
+  ComponentGlobal_BoxInformation,
+  ComponentGlobal_ButtonUploadFileImage,
+} from "@/app_modules/_global/component";
 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,
-  onSetFotoProfileId,
+  filePP,
+  onSetFilePP,
 }: {
  imgPP: string | null | undefined;
  onSetImgPP: (img: string | null) => void;
-  fotoProfileId: string;
-  onSetFotoProfileId: (id: string) => void;
+  filePP: File | null;
+  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>
    </>