fix ( upload image )

deskripsi: - fix upload image portofolio
2025-01-14 11:01:52 +08:00
parent cdc548885d
commit 7f40b7bb33
11 changed files with 364 additions and 438 deletions
--- a/src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx
+++ b/src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx
@@ -1,22 +1,22 @@
 "use client";

-import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import { MainColor } from "@/app_modules/_global/color";
 import {
  ComponentGlobal_NotifikasiBerhasil,
  ComponentGlobal_NotifikasiGagal,
  ComponentGlobal_NotifikasiPeringatan,
 } from "@/app_modules/_global/notif_global";
-import { Button } from "@mantine/core";
+import { Box, Button } from "@mantine/core";

-import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { DIRECTORY_ID } from "@/app/lib";
 import {
  funGlobal_DeleteFileById,
  funGlobal_UploadToStorage,
 } from "@/app_modules/_global/fun";
-import { DIRECTORY_ID } from "@/app/lib";
-import { portofolio_funEditLogoBisnisById } from "../../fun";
 import { clientLogger } from "@/util/clientLogger";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { portofolio_funEditLogoBisnisById } from "../../fun";

 export function ComponentPortofolio_ButtonEditLogoBisnis({
  file,
@@ -33,16 +33,6 @@ export function ComponentPortofolio_ButtonEditLogoBisnis({
    try {
      setLoading(true);

-      const deleteLogo = await funGlobal_DeleteFileById({
-        fileId: fileRemoveId,
-        dirId: DIRECTORY_ID.portofolio_logo,
-      });
-
-      if (!deleteLogo.success) {
-        setLoading(false);
-        clientLogger.error("Error delete logo", deleteLogo.message);
-      }
-
      const uploadFileToStorage = await funGlobal_UploadToStorage({
        file: file,
        dirId: DIRECTORY_ID.portofolio_logo,
@@ -53,9 +43,21 @@ export function ComponentPortofolio_ButtonEditLogoBisnis({
        ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
        return;
      }
+
+      const deleteLogo = await funGlobal_DeleteFileById({
+        fileId: fileRemoveId,
+        dirId: DIRECTORY_ID.portofolio_logo,
+      });
+
+      if (!deleteLogo.success) {
+        setLoading(false);
+        clientLogger.error("Error delete logo", deleteLogo.message);
+      }
+
+      const logoId = uploadFileToStorage.data.id;
      const res = await portofolio_funEditLogoBisnisById({
        portofolioId: portofolioId,
-        logoId: uploadFileToStorage.data.id,
+        logoId: logoId,
      });

      if (res.status === 200) {
@@ -73,8 +75,16 @@ export function ComponentPortofolio_ButtonEditLogoBisnis({

  return (
    <>
-      {file ? (
+      <Box
+        p={"xs"}
+        bg={"red"}
+        style={{
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
        <Button
+          disabled={file === null}
          loaderPosition="center"
          loading={loading}
          radius={"xl"}
@@ -83,17 +93,15 @@ export function ComponentPortofolio_ButtonEditLogoBisnis({
          color="yellow"
          c={"black"}
          style={{
+            width: "100%",
            transition: "0.5s",
-            border: `1px solid ${AccentColor.yellow}`,
+            position: "absolute",
+            bottom: 20,
          }}
        >
          Simpan
        </Button>
-      ) : (
-        <Button disabled radius={"xl"}>
-          Simpan
-        </Button>
-      )}
+      </Box>
    </>
  );
 }
--- a/src/app_modules/katalog/portofolio/component/button/comp_button_selanjutnya.tsx
+++ b/src/app_modules/katalog/portofolio/component/button/comp_button_selanjutnya.tsx
@@ -9,6 +9,9 @@ import { MODEL_PORTOFOLIO_OLD } from "@/app_modules/model_global/portofolio";
 import { Button } from "@mantine/core";
 import _ from "lodash";

+import { DIRECTORY_ID } from "@/app/lib";
+import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import { clientLogger } from "@/util/clientLogger";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import funCreatePortofolio from "../../fun/fun_create_portofolio";
@@ -17,12 +20,12 @@ export function Portofolio_ComponentButtonSelanjutnya({
  profileId,
  dataPortofolio,
  dataMedsos,
-  imageId,
+  file,
 }: {
  profileId: string;
  dataPortofolio: MODEL_PORTOFOLIO_OLD;
  dataMedsos: any;
-  imageId: string;
+  file: File;
 }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
@@ -48,31 +51,45 @@ export function Portofolio_ComponentButtonSelanjutnya({

    try {
      setLoading(true);
+
+      const uploadFile = await funGlobal_UploadToStorage({
+        file: file,
+        dirId: DIRECTORY_ID.portofolio_logo,
+      });
+
+      if (!uploadFile.success) {
+        setLoading(false);
+        ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+        return;
+      }
+
+      const fileId = uploadFile.data.id;
+
      const res = await funCreatePortofolio({
        profileId: profileId,
        data: dataPortofolio as any,
        medsos: dataMedsos,
-        fileId: imageId,
+        fileId: fileId,
      });
      if (res.status === 201) {
        ComponentGlobal_NotifikasiBerhasil("Berhasil disimpan");
        router.replace(RouterMap.create + res.id, { scroll: false });
      } else {
+        setLoading(false);
        ComponentGlobal_NotifikasiGagal("Gagal disimpan");
      }
    } catch (error) {
-      console.error(error);
-    } finally {
      setLoading(false);
+      clientLogger.error("Error create portofolio", error);
    }
  }
  return (
    <>
      <Button
-        disabled={_.values(dataPortofolio).includes("") || imageId == ""}
+        disabled={_.values(dataPortofolio).includes("") || file === null}
        mt={"md"}
        radius={50}
-        loading={loading ? true : false}
+        loading={loading}
        loaderPosition="center"
        onClick={() => {
          onSubmit();
--- a/src/app_modules/katalog/portofolio/create/view.tsx
+++ b/src/app_modules/katalog/portofolio/create/view.tsx
@@ -1,9 +1,20 @@
 "use client";

+import { DIRECTORY_ID } from "@/app/lib";
 import { MainColor } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
+import {
+  ComponentGlobal_BoxUploadImage,
+  ComponentGlobal_ButtonUploadFileImage,
+} from "@/app_modules/_global/component";
 import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
+import {
+  funGlobal_DeleteFileById,
+  funGlobal_UploadToStorage,
+} from "@/app_modules/_global/fun";
+import { MAX_SIZE } from "@/app_modules/_global/lib";
+import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
 import { BIDANG_BISNIS_OLD } from "@/app_modules/model_global/portofolio";
 import {
  AspectRatio,
@@ -18,20 +29,12 @@ import {
  Textarea,
  Title,
 } from "@mantine/core";
-import { IconCamera } from "@tabler/icons-react";
+import { IconCamera, IconPhoto } from "@tabler/icons-react";
 import _ from "lodash";
 import { useState } from "react";
-import { Portofolio_ComponentButtonSelanjutnya } from "../component";
-import { MAX_SIZE } from "@/app_modules/_global/lib";
-import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
-import {
-  funGlobal_DeleteFileById,
-  funGlobal_UploadToStorage,
-} from "@/app_modules/_global/fun";
-import { DIRECTORY_ID } from "@/app/lib";
 import { PhoneInput } from "react-international-phone";
 import "react-international-phone/style.css";
+import { Portofolio_ComponentButtonSelanjutnya } from "../component";

 export default function CreatePortofolio({
  bidangBisnis,
@@ -56,16 +59,15 @@ export default function CreatePortofolio({
    tiktok: "",
  });

+  const [file, setFile] = useState<File | null>(null);
  const [img, setImg] = useState<any | null>(null);
  const [imageId, setImageId] = useState("");

  return (
    <>
-      {/* {JSON.stringify(profileId)} */}
-
      <Stack px={"sm"} mb={"lg"} spacing={50}>
        <Stack spacing={"sm"}>
-          <ComponentGlobal_BoxInformation informasi="Lengkapi Data Bisnis" />
+          <ComponentGlobal_BoxInformation informasi="Lengkapi data bisnis" />
          <TextInput
            styles={{
              label: {
@@ -101,8 +103,8 @@ export default function CreatePortofolio({
                color: MainColor.red,
              },
              dropdown: {
-                backgroundColor: MainColor.white
-              }
+                backgroundColor: MainColor.white,
+              },
            }}
            withAsterisk
            label="Bidang Bisnis"
@@ -156,7 +158,7 @@ export default function CreatePortofolio({
              countrySelectorStyleProps={{
                buttonStyle: {
                  backgroundColor: MainColor.login,
-                }  
+                },
              }}
              inputStyle={{ width: "100%", backgroundColor: MainColor.login }}
              defaultCountry="id"
@@ -205,7 +207,7 @@ export default function CreatePortofolio({
        </Stack>

        <Stack>
-          <ComponentGlobal_BoxInformation informasi="Upload Logo Bisnis Anda" />
+          <ComponentGlobal_BoxInformation informasi="Upload logo bisnis anda untuk ditampilkan dalam portofolio " />
          <ComponentGlobal_BoxUploadImage>
            {img ? (
              <AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
@@ -218,17 +220,19 @@ export default function CreatePortofolio({
              </AspectRatio>
            ) : (
              <Stack spacing={5} justify="center" align="center" h={"100%"}>
-                <Title c={MainColor.white} order={3}>
-                  Upload Logo Bisnis
-                </Title>
-                <Text c={MainColor.white} fs={"italic"} fz={10} align="center">
-                  Masukan logo bisnis anda untuk ditampilkan dalam portofolio
-                </Text>
+                <IconPhoto size={100} />
              </Stack>
            )}
          </ComponentGlobal_BoxUploadImage>

          <Center>
+            <ComponentGlobal_ButtonUploadFileImage
+              onSetFile={setFile}
+              onSetImage={setImg}
+            />
+          </Center>
+
+          {/* <Center>
            <FileButton
              onChange={async (files: any | null) => {
                try {
@@ -310,7 +314,7 @@ export default function CreatePortofolio({
                </Button>
              )}
            </FileButton>
-          </Center>
+          </Center> */}
        </Stack>

        <Stack>
@@ -416,7 +420,8 @@ export default function CreatePortofolio({
          dataPortofolio={dataPortofolio as any}
          dataMedsos={dataMedsos}
          profileId={profileId}
-          imageId={imageId}
+          // 
+          file={file as File}
        />
      </Stack>
    </>
--- a/src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx
+++ b/src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx
@@ -1,19 +1,16 @@
 "use client";

-import { APIs } from "@/app/lib";
 import {
-  AccentColor,
-  MainColor,
+  AccentColor
 } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
-import { Button, Center, FileButton, Image, Paper, Stack } from "@mantine/core";
-import { IconCamera } from "@tabler/icons-react";
+import {
+  ComponentGlobal_ButtonUploadFileImage,
+  ComponentGlobal_LoadImage,
+} from "@/app_modules/_global/component";
+import { Center, Image, Paper, Stack } from "@mantine/core";
 import { useState } from "react";
-import { MODEL_PORTOFOLIO } from "../../model/interface";
 import { ComponentPortofolio_ButtonEditLogoBisnis } from "../../component";
-import { MAX_SIZE } from "@/app_modules/_global/lib";
-import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import { MODEL_PORTOFOLIO } from "../../model/interface";

 export default function Portofolio_EditLogoBisnis({
  dataPorto,
@@ -26,61 +23,30 @@ export default function Portofolio_EditLogoBisnis({
  return (
    <>
      <Stack spacing={"xl"} px={"sm"}>
-        <Paper
-          p={"sm"}
-          style={{
-            backgroundColor: AccentColor.darkblue,
-            border: `2px solid ${AccentColor.blue}`,
-            borderRadius: "10px ",
-            padding: "15px",
-            color: "white",
-          }}
-        >
-          <Stack align="center">
+        <Stack>
+          <Paper
+            p={"sm"}
+            style={{
+              backgroundColor: AccentColor.darkblue,
+              border: `2px solid ${AccentColor.blue}`,
+              borderRadius: "10px ",
+              padding: "15px",
+              color: "white",
+            }}
+          >
            {img ? (
              <Image maw={250} alt="Image" src={img} />
            ) : (
              <ComponentGlobal_LoadImage fileId={dataPorto.logoId} />
            )}
-
-            <Center>
-              <FileButton
-                onChange={async (files: any | null) => {
-                  try {
-                    const buffer = URL.createObjectURL(
-                      new Blob([new Uint8Array(await files.arrayBuffer())])
-                    );
-
-                    if (files.size > MAX_SIZE) {
-                      ComponentGlobal_NotifikasiPeringatan(
-                        PemberitahuanMaksimalFile
-                      );
-                    } else {
-                      setImg(buffer);
-                      setFile(files);
-                    }
-                  } catch (error) {
-                    console.log(error);
-                  }
-                }}
-                accept="image/png,image/jpeg"
-              >
-                {(props) => (
-                  <Button
-                    {...props}
-                    radius={"xl"}
-                    leftIcon={<IconCamera />}
-                    bg={MainColor.yellow}
-                    color="yellow"
-                    c={"black"}
-                  >
-                    Upload
-                  </Button>
-                )}
-              </FileButton>
-            </Center>
-          </Stack>
-        </Paper>
+          </Paper>
+          <Center>
+            <ComponentGlobal_ButtonUploadFileImage
+              onSetFile={setFile}
+              onSetImage={setImg}
+            />
+          </Center>
+        </Stack>
        <ComponentPortofolio_ButtonEditLogoBisnis
          file={file as any}
          portofolioId={dataPorto.id}
--- a/src/app_modules/katalog/profile/upload/foto_profile/index.tsx
+++ b/src/app_modules/katalog/profile/upload/foto_profile/index.tsx
@@ -41,6 +41,7 @@ export default function UploadFotoProfile({
            onSetImage={setImage}
          />
        </Center>
+        
        <Profile_ComponentButtonUpdatePhotoProfile
          file={file as any}
          profileId={profile.id}