fix ( upload image )

deskripsi:
- perbaiki fungsi upload dan delete image di job

src/app_modules/_global/button/comp_button_upload_photo.tsx

@@ -2,15 +2,16 @@
 
 import { clientLogger } from "@/util/clientLogger";
 import { Button, FileButton } from "@mantine/core";
-import { IconCamera } from "@tabler/icons-react";
+import { IconUpload } from "@tabler/icons-react";
 import { useState } from "react";
-import { MainColor } from "../color";
+import { AccentColor, MainColor } from "../color";
+import { ComponentGlobal_NotifikasiPeringatan } from "../notif_global";
 
 export function ComponentGlobal_ButtonUploadFileImage({
   onSetFile,
   onSetImage,
 }: {
-  onSetFile: File | any;
+  onSetFile: File | null | any;
   onSetImage: any | null;
 }) {
   const [isLoading, setIsLoading] = useState(false);
@@ -24,11 +25,11 @@ export function ComponentGlobal_ButtonUploadFileImage({
             new Blob([new Uint8Array(await files.arrayBuffer())])
           );
 
-          // if (files.size > MAX_SIZE) {
-          //   ComponentGlobal_NotifikasiPeringatan(PemberitahuanMaksimalFile);
-          //   return;
-          // } else {
-          // }
+          if (files.size > 100 * 1024 * 1024) {
+            setIsLoading(false);
+            ComponentGlobal_NotifikasiPeringatan("File terlalu besar");
+          }
+
           onSetFile(files);
           onSetImage(buffer);
           setIsLoading(false);
@@ -37,7 +38,7 @@ export function ComponentGlobal_ButtonUploadFileImage({
           clientLogger.error("Upload error:", error);
         }
       }}
-      accept="image/png,image/jpeg"
+      accept="image/png,image/png,image/jpeg,image/gif"
     >
       {(props) => (
         <Button
@@ -45,10 +46,12 @@ export function ComponentGlobal_ButtonUploadFileImage({
           loading={isLoading}
           loaderPosition="center"
           radius={"xl"}
-          leftIcon={<IconCamera />}
-          bg={MainColor.yellow}
-          color="yellow"
-          c={"black"}
+          style={{
+            backgroundColor: MainColor.yellow,
+            border: `1px solid ${AccentColor.yellow}`,
+          }}
+          leftIcon={<IconUpload color="black" size={20} />}
+          c={MainColor.darkblue}
         >
           Upload
         </Button>

src/app_modules/_global/fun/delete/fun_delete_file_by_id.tsx

@@ -1,6 +1,6 @@
 import { clientLogger } from "@/util/clientLogger";
 
-export async function funGlobal_DeleteFileById({
+export async function funDeteleteFileById({
   fileId,
   dirId,
 }: {
@@ -8,9 +8,23 @@ export async function funGlobal_DeleteFileById({
   dirId?: string;
 }) {
   try {
+    const tokenResponse = await fetch("/api/get-cookie");
+    if (!tokenResponse.ok) {
+      throw new Error("Failed to get token");
+    }
+    const { token } = await tokenResponse.json();
+
+    if (!token) {
+      return { success: false, message: "Token not found" };
+    }
+
     const res = await fetch("/api/image/delete", {
       method: "DELETE",
       body: JSON.stringify({ fileId, dirId }),
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
     });
 
     const data = await res.json();

src/app_modules/_global/fun/index.ts

@@ -1,7 +1,7 @@
-import { funGlobal_DeleteFileById } from "./delete/fun_delete_file_by_id";
-import { funGlobal_UploadToStorage } from "./upload/fun_upload_to_storage";
+import { funDeteleteFileById } from "./delete/fun_delete_file_by_id";
+import { funUploadFileToStorage } from "./upload/fun_upload_to_storage";
 import { funValidasiUploadCreatedFile } from "./upload/fun_validasi_upload_created_file";
 
-export { funGlobal_UploadToStorage };
-export { funGlobal_DeleteFileById };
+export { funUploadFileToStorage as funGlobal_UploadToStorage };
+export { funDeteleteFileById as funGlobal_DeleteFileById };
 export { funValidasiUploadCreatedFile };

src/app_modules/_global/fun/upload/fun_upload_to_storage.ts

@@ -1,55 +1,40 @@
-import { TokenStorage } from "@/app/lib/token";
-
-export async function funGlobal_UploadToStorage({
+export async function funUploadFileToStorage({
   file,
   dirId,
 }: {
   file: File;
   dirId: string;
 }) {
-  const Env_WS_APIKEY = TokenStorage.value;
+  try {
+    const tokenResponse = await fetch("/api/get-cookie");
+    if (!tokenResponse.ok) {
+      throw new Error("Failed to get token");
+    }
+    const { token } = await tokenResponse.json();
 
-  const allowedMimeTypes = [
-    "image/heif", // Format HEIF standar
-    "image/heic", // Format HEIF untuk container HEIC
-    "image/heif-sequence", // Untuk sequence/animasi HEIF
-    "image/heic-sequence", // Untuk sequence/animasi HEIC
-    "image/png",
-    "image/jpeg",
-    "image/gif",
-    "text/csv",
-    "application/pdf",
-    "application/msword",
-    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-    "application/vnd.ms-excel",
-    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-    "text/plain",
-  ];
+    if (!token) {
+      return { success: false, message: "Token not found" };
+    }
 
-  // if (!allowedMimeTypes.includes(file.type)) console.log("File tidak sesuai");
-  if (!allowedMimeTypes.includes(file.type)) {
-    console.error("File tidak sesuai");
-    return { success: false, message: "File type not allowed" };
-  }
+    const formData = new FormData();
+    formData.append("file", file);
+    formData.append("dirId", dirId);
 
-  if (file.size > 100 * 1024 * 1024) {
-    console.error("File terlalu besar");
-    return { success: false, message: "File size exceeds limit" };
-  }
-  const formData = new FormData();
-  formData.append("file", file);
-  formData.append("dirId", dirId);
+    const upload = await fetch("/api/image/upload", {
+      method: "POST",
+      body: formData,
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
 
-  const upload = await fetch("/api/image/upload", {
-    method: "POST",
-    body: formData,
-  });
+    const res = await upload.json();
 
-  const res = await upload.json();
-
-  if (upload.ok) {
-    return { success: true, data: res.data, message: res.message };
-  } else {
-    return { success: false, data: {}, message: res.message };
+    return upload.ok
+      ? { success: true, data: res.data, message: res.message }
+      : { success: false, data: {}, message: res.message };
+  } catch (error) {
+    console.log(error);
+    return { success: false, message: "An unexpected error occurred" };
   }
 }

src/app_modules/_global/fun/upload/fun_validasi_upload_created_file.ts

@@ -2,8 +2,8 @@ import { clientLogger } from "@/util/clientLogger";
 import { MAX_SIZE } from "../../lib";
 import { PemberitahuanMaksimalFile } from "../../lib/max_size";
 import { ComponentGlobal_NotifikasiPeringatan } from "../../notif_global";
-import { funGlobal_DeleteFileById } from "../delete/fun_delete_file_by_id";
-import { funGlobal_UploadToStorage } from "./fun_upload_to_storage";
+import { funDeteleteFileById } from "../delete/fun_delete_file_by_id";
+import { funUploadFileToStorage } from "./fun_upload_to_storage";
 
 export async function funValidasiUploadCreatedFile({
   files,
@@ -31,7 +31,7 @@ export async function funValidasiUploadCreatedFile({
     }
 
     if (fileId != "") {
-      const deleteFotoProfile = await funGlobal_DeleteFileById({
+      const deleteFotoProfile = await funDeteleteFileById({
         fileId: fileId,
         dirId: dirId,
       });
@@ -49,7 +49,7 @@ export async function funValidasiUploadCreatedFile({
         onSetFileId("");
         onSetImageBuffer(null);
 
-        const uploadPhoto = await funGlobal_UploadToStorage({
+        const uploadPhoto = await funUploadFileToStorage({
           file: files,
           dirId: dirId,
         });
@@ -73,7 +73,7 @@ export async function funValidasiUploadCreatedFile({
         }
       }
     } else {
-      const uploadPhoto = await funGlobal_UploadToStorage({
+      const uploadPhoto = await funUploadFileToStorage({
         file: files,
         dirId: dirId,
       });

src/app_modules/_global/lib/api_image.ts

@@ -1,16 +0,0 @@
-export const apiDeleteImageById = async ({
-  fileId,
-  dirId,
-}: {
-  fileId: string;
-  dirId?: string;
-}) => {
-  const response = await fetch(`/api/image/delete`, {
-    method: "DELETE",
-    body: JSON.stringify({ fileId, dirId }),
-  });
-
-  console.log("delete api =>", await response.json());
-
-  return await response.json().catch(() => null);
-};