fix ( upload image )

deskripsi:
- fix upload image portofolio

src/app_modules/_global/component/box_information.tsx

@@ -1,5 +1,6 @@
 import { Center, Grid, Group, Paper, Stack, Text, Title } from "@mantine/core";
 import { AccentColor, MainColor } from "../color/color_pallet";
+import { IconInfoCircle } from "@tabler/icons-react";
 
 export default function ComponentGlobal_BoxInformation({
   informasi,
@@ -36,18 +37,18 @@ export default function ComponentGlobal_BoxInformation({
             </Text>
           </Stack>
         ) : (
-          <Group>
+          <Grid>
-            <Text fz={fonsize ? fonsize : 12} c={"red"} fw={"bold"}>
+            <Grid.Col span={1}>
-              *{" "}
+              <IconInfoCircle color={MainColor.white} />
+            </Grid.Col>
+            <Grid.Col span={10}>
               <Text span inherit c={MainColor.white} fw={"normal"}>
                 {informasi}
               </Text>
-            </Text>
+            </Grid.Col>
-          </Group>
+          </Grid>
         )}
       </Paper>
     </>
   );
-
-  
 }

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 { DIRECTORY_ID } from "@/app/lib";
-import { useState } from "react";
 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>
-      ) : (
+      </Box>
-        <Button disabled radius={"xl"}>
-          Simpan
-        </Button>
-      )}
     </>
   );
 }

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();

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}>
+                <IconPhoto size={100} />
-                  Upload Logo Bisnis
-                </Title>
-                <Text c={MainColor.white} fs={"italic"} fz={10} align="center">
-                  Masukan logo bisnis anda untuk ditampilkan dalam portofolio
-                </Text>
               </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>
     </>

src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx

@@ -1,19 +1,16 @@
 "use client";
 
-import { APIs } from "@/app/lib";
 import {
-  AccentColor,
+  AccentColor
-  MainColor,
 } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
+import {
-import { Button, Center, FileButton, Image, Paper, Stack } from "@mantine/core";
+  ComponentGlobal_ButtonUploadFileImage,
-import { IconCamera } from "@tabler/icons-react";
+  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 { MODEL_PORTOFOLIO } from "../../model/interface";
-import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
 
 export default function Portofolio_EditLogoBisnis({
   dataPorto,
@@ -26,6 +23,7 @@ export default function Portofolio_EditLogoBisnis({
   return (
     <>
       <Stack spacing={"xl"} px={"sm"}>
+        <Stack>
           <Paper
             p={"sm"}
             style={{
@@ -36,51 +34,19 @@ export default function Portofolio_EditLogoBisnis({
               color: "white",
             }}
           >
-          <Stack align="center">
             {img ? (
               <Image maw={250} alt="Image" src={img} />
             ) : (
               <ComponentGlobal_LoadImage fileId={dataPorto.logoId} />
             )}
-
+          </Paper>
           <Center>
-              <FileButton
+            <ComponentGlobal_ButtonUploadFileImage
-                onChange={async (files: any | null) => {
+              onSetFile={setFile}
-                  try {
+              onSetImage={setImg}
-                    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>
         <ComponentPortofolio_ButtonEditLogoBisnis
           file={file as any}
           portofolioId={dataPorto.id}

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}

src/app_modules/map/_component/button/comp_button_save_pin.tsx

@@ -4,24 +4,27 @@ 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 { useRouter } from "next/navigation";
 import { useState } from "react";
 import { map_funCreatePin } from "../../fun/create/fun_create_pin";
+import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import { DIRECTORY_ID } from "@/app/lib";
 
 export function ComponentMap_ButtonSavePin({
   namePin,
   lat,
   long,
   portofolioId,
-  imageId,
+  file,
 }: {
   namePin: string;
   lat: string;
   long: string;
   portofolioId: string;
-  imageId: string;
+  file: File;
 }) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
@@ -30,6 +33,19 @@ export function ComponentMap_ButtonSavePin({
     try {
       setLoading(true);
 
+      const uploadFile = await funGlobal_UploadToStorage({
+        file: file,
+        dirId: DIRECTORY_ID.map_image,
+      });
+
+      if (!uploadFile.success) {
+        setLoading(false);
+        ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+        return;
+      }
+
+      const imageId = uploadFile.data.id;
+
       const res = await map_funCreatePin({
         data: {
           latitude: lat as any,
@@ -45,9 +61,9 @@ export function ComponentMap_ButtonSavePin({
         ? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
         : ComponentGlobal_NotifikasiGagal(res.message);
     } catch (error) {
-      console.error(error);
-    } finally {
       setLoading(false);
+
+      console.error(error);
     }
   }
 
@@ -57,7 +73,7 @@ export function ComponentMap_ButtonSavePin({
         loading={loading}
         my={"xl"}
         style={{ transition: "0.5s" }}
-        disabled={namePin === "" || imageId == "" ? true : false}
+        disabled={namePin === "" || file === null}
         radius={"xl"}
         loaderPosition="center"
         bg={MainColor.yellow}

src/app_modules/map/_component/button/comp_button_update_data_map.tsx

@@ -33,6 +33,17 @@ export function ComponentMap_ButtonUpdateDataMap({
       setIsLoading(true);
 
       if (file !== null) {
+        const uploadFileToStorage = await funGlobal_UploadToStorage({
+          file: file,
+          dirId: DIRECTORY_ID.map_image,
+        });
+
+        if (!uploadFileToStorage.success) {
+          setIsLoading(false);
+          ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+          return;
+        }
+
         const deleteLogo = await funGlobal_DeleteFileById({
           fileId: data.imageId,
           dirId: DIRECTORY_ID.map_image,
@@ -43,16 +54,6 @@ export function ComponentMap_ButtonUpdateDataMap({
           clientLogger.error("Error delete logo", deleteLogo.message);
         }
 
-        const uploadFileToStorage = await funGlobal_UploadToStorage({
-          file: file,
-          dirId: DIRECTORY_ID.map_image,
-        });
-        if (!uploadFileToStorage.success) {
-          setIsLoading(false);
-          ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
-          return;
-        }
-
         const res = await map_funEditMap({
           data: data,
           fileId: uploadFileToStorage.data.id,
@@ -91,7 +92,7 @@ export function ComponentMap_ButtonUpdateDataMap({
         loading={isLoading}
         mb={"xl"}
         style={{ transition: "0.5s" }}
-        disabled={data.namePin === "" ? true : false}
+        disabled={data.namePin === "" || file === null}
         radius={"xl"}
         bg={MainColor.yellow}
         color="yellow"

src/app_modules/map/ui/ui_create_pin.tsx

@@ -1,10 +1,19 @@
 "use client";
 
+import { DIRECTORY_ID } from "@/app/lib";
 import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
+import {
+  ComponentGlobal_BoxInformation,
+  ComponentGlobal_BoxUploadImage,
+  ComponentGlobal_ButtonUploadFileImage,
+} from "@/app_modules/_global/component";
+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/notifikasi_peringatan";
@@ -16,11 +25,9 @@ import {
   Image,
   Paper,
   Stack,
-  Text,
   TextInput,
-  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 Map, {
@@ -31,11 +38,6 @@ import Map, {
 } from "react-map-gl";
 import { ComponentMap_ButtonSavePin } from "../_component";
 import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long";
-import {
-  funGlobal_DeleteFileById,
-  funGlobal_UploadToStorage,
-} from "@/app_modules/_global/fun";
-import { DIRECTORY_ID } from "@/app/lib";
 
 export function UiMap_CreatePin({
   mapboxToken,
@@ -47,12 +49,15 @@ export function UiMap_CreatePin({
   const [[lat, long], setLatLong] = useState([0, 0]);
   const [isPin, setIsPin] = useState(false);
   const [namePin, setNamePin] = useState("");
+  const [file, setFile] = useState<File | null>(null);
   const [img, setImg] = useState<any | null>(null);
-  const [imageId, setImageId] = useState("");
 
   return (
     <>
-      <Stack>
+      <Stack spacing={50}>
+        {/* Map Pin */}
+        <Stack spacing={"sm"}>
+          <ComponentGlobal_BoxInformation informasi="Tentukan lokasi pin map dengan klik pada peta." />
           <Map
             mapboxAccessToken={mapboxToken}
             mapStyle={"mapbox://styles/mapbox/streets-v11"}
@@ -109,13 +114,15 @@ export function UiMap_CreatePin({
             <TextInput
               disabled={isPin ? false : true}
               style={{ transition: "0.5s" }}
-            styles={{ label: { color: isPin ? MainColor.white : "gray" },
+              styles={{
+                label: { color: isPin ? MainColor.white : "gray" },
                 input: {
-              backgroundColor: MainColor.white
+                  backgroundColor: MainColor.white,
                 },
                 required: {
                   color: MainColor.red,
-            } }}
+                },
+              }}
               label="Nama Pin"
               placeholder="Masukan nama pin map"
               withAsterisk
@@ -124,8 +131,10 @@ export function UiMap_CreatePin({
               }}
             />
           </Paper>
+        </Stack>
 
-        <Stack>
+        <Stack spacing={"sm"}>
+          <ComponentGlobal_BoxInformation informasi="Upload foto lokasi bisnis anda untuk ditampilkan dalam detail map." />
           <ComponentGlobal_BoxUploadImage>
             {img ? (
               <AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
@@ -138,100 +147,16 @@ export function UiMap_CreatePin({
               </AspectRatio>
             ) : (
               <Stack spacing={5} justify="center" align="center" h={"100%"}>
-                <Title c={MainColor.white} order={3}>Foto Lokasi Bisnis</Title>
+                <IconPhoto size={100} />
-                <Text c={MainColor.white} fs={"italic"} fz={10} align="center">
-                  Upload foto lokasi bisnis anda untuk ditampilkan dalam detail
-                  map
-                </Text>
               </Stack>
             )}
           </ComponentGlobal_BoxUploadImage>
 
           <Center>
-            <FileButton
+            <ComponentGlobal_ButtonUploadFileImage
-              onChange={async (files: any | null) => {
+              onSetFile={setFile}
-                try {
+              onSetImage={setImg}
-                  const buffer = URL.createObjectURL(
+            />
-                    new Blob([new Uint8Array(await files.arrayBuffer())])
-                  );
-
-                  if (files.size > MAX_SIZE) {
-                    setImg(null);
-                    ComponentGlobal_NotifikasiPeringatan(
-                      PemberitahuanMaksimalFile,
-                      3000
-                    );
-
-                    return;
-                  }
-
-                  // if (files.size > MAX_SIZE) {
-                  //   setImg(null);
-                  //   ComponentGlobal_NotifikasiPeringatan(
-                  //     PemberitahuanMaksimalFile,
-                  //     3000
-                  //   );
-                  // } else {
-                  //   setImg(buffer);
-                  // }
-
-                  if (imageId != "") {
-                    const deletePhoto = await funGlobal_DeleteFileById({
-                      fileId: imageId,
-                    });
-
-                    if (deletePhoto.success) {
-                      setImageId("");
-
-                      const uploadPhoto = await funGlobal_UploadToStorage({
-                        file: files,
-                        dirId: DIRECTORY_ID.map_image,
-                      });
-
-                      if (uploadPhoto.success) {
-                        setImageId(uploadPhoto.data.id);
-                        setImg(buffer);
-                      } else {
-                        ComponentGlobal_NotifikasiPeringatan(
-                          "Gagal upload gambar"
-                        );
-                      }
-                    }
-                  } else {
-                    const uploadPhoto = await funGlobal_UploadToStorage({
-                      file: files,
-                      dirId: DIRECTORY_ID.map_image,
-                    });
-
-                    if (uploadPhoto.success) {
-                      setImageId(uploadPhoto.data.id);
-                      setImg(buffer);
-                    } else {
-                      ComponentGlobal_NotifikasiPeringatan(
-                        "Gagal upload gambar"
-                      );
-                    }
-                  }
-                } catch (error) {
-                  console.log(error);
-                }
-              }}
-              accept="image/png,image/jpeg"
-            >
-              {(props) => (
-                <Button
-                  disabled={isPin ? false : true}
-                  {...props}
-                  radius={"xl"}
-                  leftIcon={<IconCamera />}
-                  bg={MainColor.yellow}
-                  color="yellow"
-                  c={"black"}
-                >
-                  Upload
-                </Button>
-              )}
-            </FileButton>
           </Center>
         </Stack>
 
@@ -240,7 +165,7 @@ export function UiMap_CreatePin({
           lat={lat as any}
           long={long as any}
           portofolioId={portofolioId}
-          imageId={imageId}
+          file={file as File}
         />
       </Stack>
     </>

src/app_modules/map/ui/ui_custom_pin.tsx

@@ -1,18 +1,22 @@
 "use client";
 
-import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
+import { APIs, DIRECTORY_ID } from "@/app/lib";
-import { RouterMap } from "@/app/lib/router_hipmi/router_map";
 import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_ButtonUploadFileImage } from "@/app_modules/_global/component";
 import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import {
+  funGlobal_DeleteFileById,
+  funGlobal_UploadToStorage,
+} from "@/app_modules/_global/fun";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import { Avatar, Button, Center, FileButton, Stack } from "@mantine/core";
+import { clientLogger } from "@/util/clientLogger";
-import { IconCamera } from "@tabler/icons-react";
+import { Avatar, Button, Center, Stack } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import {
@@ -25,14 +29,6 @@ import {
 import { map_funCustomPinMap } from "../fun";
 import { defaultMapZoom } from "../lib/default_lat_long";
 import { MODEL_MAP } from "../lib/interface";
-import { APIs, DIRECTORY_ID } from "@/app/lib";
-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 { clientLogger } from "@/util/clientLogger";
 
 export function UiMap_CustomPin({
   dataMap,
@@ -55,7 +51,7 @@ export function UiMap_CustomPin({
         <Stack>
           <ComponentGlobal_BoxInformation
             informasi={
-              "Pin map akan secara otomatis menampilkan logo pada porotofolio ini, jika anda ingin melakukan custom silahkan upload logo pin baru anda !"
+              "Pin map akan secara otomatis menampilkan logo pada porotofolio ini, jika anda ingin melakukan custom silahkan upload logo pin baru anda."
             }
           />
 
@@ -90,40 +86,10 @@ export function UiMap_CustomPin({
           )}
 
           <Center>
-            <FileButton
+            <ComponentGlobal_ButtonUploadFileImage
-              onChange={async (files: any | null) => {
+              onSetFile={setFilePin}
-                try {
+              onSetImage={setImgPin}
-                  const buffer = URL.createObjectURL(
+            />
-                    new Blob([new Uint8Array(await files.arrayBuffer())])
-                  );
-                  if (files.size > MAX_SIZE) {
-                    ComponentGlobal_NotifikasiPeringatan(
-                      PemberitahuanMaksimalFile,
-                      3000
-                    );
-                  } else {
-                    setImgPin(buffer);
-                    setFilePin(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>
 
@@ -201,14 +167,6 @@ function ButtonSimpan({
   async function onCustom() {
     try {
       setLoading(true);
-      const deletePin = await funGlobal_DeleteFileById({
-        fileId: fileRemoveId,
-        dirId: DIRECTORY_ID.map_pin,
-      });
-      if (!deletePin.success) {
-        setLoading(false);
-        clientLogger.error("Error delete logo", deletePin.message);
-      }
 
       const uploadFileToStorage = await funGlobal_UploadToStorage({
         file: filePin,
@@ -221,6 +179,15 @@ function ButtonSimpan({
         return;
       }
 
+      const deletePin = await funGlobal_DeleteFileById({
+        fileId: fileRemoveId,
+        dirId: DIRECTORY_ID.map_pin,
+      });
+      if (!deletePin.success) {
+        setLoading(false);
+        clientLogger.error("Error delete logo", deletePin.message);
+      }
+
       const res = await map_funCustomPinMap({
         mapId: mapId,
         fileId: uploadFileToStorage.data.id,

src/app_modules/map/ui/ui_edit_map.tsx

@@ -7,6 +7,7 @@ import {
 } from "@/app_modules/_global/color/color_pallet";
 import {
   ComponentGlobal_BoxUploadImage,
+  ComponentGlobal_ButtonUploadFileImage,
   ComponentGlobal_LoadImage,
 } from "@/app_modules/_global/component";
 import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
@@ -49,7 +50,10 @@ export function UiMap_EditMap({
 
   return (
     <>
-      <Stack spacing={30} px={"sm"}>
+      <Stack spacing={50} px={"sm"}>
+        <Stack spacing={"sm"}>
+          <ComponentGlobal_BoxInformation informasi="Tentukan lokasi pin map dengan klik pada peta." />
+
           <Map
             mapboxAccessToken={mapboxToken}
             mapStyle={"mapbox://styles/mapbox/streets-v11"}
@@ -87,7 +91,10 @@ export function UiMap_EditMap({
               <Avatar
                 src={
                   data.pinId === null
-                  ? APIs.GET({ fileId: dataMap.Portofolio.logoId, size: "400" })
+                    ? APIs.GET({
+                        fileId: dataMap.Portofolio.logoId,
+                        size: "400",
+                      })
                     : APIs.GET({ fileId: data.pinId, size: "400" })
                 }
                 alt="Logo"
@@ -114,8 +121,12 @@ export function UiMap_EditMap({
             }}
           >
             <TextInput
-            style={{ transition: "0.5s", }}
+              style={{ transition: "0.5s" }}
-            styles={{ label: { color: MainColor.white }, required: { color: MainColor.red }, input: { backgroundColor: MainColor.white } }}
+              styles={{
+                label: { color: MainColor.white },
+                required: { color: MainColor.red },
+                input: { backgroundColor: MainColor.white },
+              }}
               label="Nama Pin"
               placeholder="Masukan nama pin map"
               value={data.namePin}
@@ -128,10 +139,11 @@ export function UiMap_EditMap({
               }}
             />
           </Paper>
+        </Stack>
 
         {/* Photo Usaha */}
         <Stack spacing={"xs"}>
-          <ComponentGlobal_BoxInformation informasi="Masukan photo toko atau tempat usaha anda !" />
+          <ComponentGlobal_BoxInformation informasi="Upload foto lokasi bisnis anda untuk ditampilkan dalam detail map." />
 
           <ComponentGlobal_BoxUploadImage>
             {img ? (
@@ -144,6 +156,13 @@ export function UiMap_EditMap({
           </ComponentGlobal_BoxUploadImage>
 
           <Center>
+            <ComponentGlobal_ButtonUploadFileImage
+              onSetFile={setFile}
+              onSetImage={setImg}
+            />
+          </Center>
+
+          {/* <Center>
             <FileButton
               onChange={async (files: any | null) => {
                 try {
@@ -178,7 +197,7 @@ export function UiMap_EditMap({
                 </Button>
               )}
             </FileButton>
-          </Center>
+          </Center> */}
         </Stack>
 
         <ComponentMap_ButtonUpdateDataMap data={data as any} file={file} />