From 40d69ffc99e5c8b5b0c9a4d4a3bff09ff69a76db Mon Sep 17 00:00:00 2001 From: Bagasbanuna02 Date: Mon, 13 Jan 2025 14:57:15 +0800 Subject: [PATCH 1/3] fix ( upload image ) deskripsi: - perbaiki fungsi upload dan delete image di job --- src/app/api/image/upload/route.ts | 10 +-- src/app/api/new/portofolio/[id]/route.ts | 7 +- src/app/lib/prisma.ts | 4 +- src/app/zCoba/upload/fun_upload.ts | 52 ------------- src/app/zCoba/upload/page.tsx | 6 +- .../button/comp_button_upload_photo.tsx | 29 +++---- .../fun/delete/fun_delete_file_by_id.tsx | 16 +++- src/app_modules/_global/fun/index.ts | 8 +- .../fun/upload/fun_upload_to_storage.ts | 69 +++++++---------- .../fun_validasi_upload_created_file.ts | 10 +-- src/app_modules/_global/lib/api_image.ts | 16 ---- .../button/comp_button_save_create.tsx | 13 ++-- .../button/comp_button_update_data.tsx | 76 +++++++++++-------- src/app_modules/job/create/view.tsx | 62 ++------------- src/app_modules/job/edit/view.tsx | 51 +++---------- src/middleware.ts | 2 +- 16 files changed, 149 insertions(+), 282 deletions(-) delete mode 100644 src/app/zCoba/upload/fun_upload.ts delete mode 100644 src/app_modules/_global/lib/api_image.ts diff --git a/src/app/api/image/upload/route.ts b/src/app/api/image/upload/route.ts index bf558db0..eb11ddb0 100644 --- a/src/app/api/image/upload/route.ts +++ b/src/app/api/image/upload/route.ts @@ -3,18 +3,18 @@ import backendLogger from "@/util/backendLogger"; import { NextResponse } from "next/server"; import sharp from "sharp"; export async function POST(request: Request) { - let fixFormData; const formData = await request.formData(); - const file: any = formData.get("file"); - const mimeType = file.type; - console.log("MIME Type:", mimeType); - const valueOfDir = formData.get("dirId"); const keyOfDirectory = await funGetDirectoryNameByValue({ value: valueOfDir as string, }); if (request.method === "POST") { + let fixFormData; + const file: any = formData.get("file"); + const mimeType = file.type; + // console.log("MIME Type:", mimeType); + try { if (mimeType != "application/pdf") { // Resize ukuran diff --git a/src/app/api/new/portofolio/[id]/route.ts b/src/app/api/new/portofolio/[id]/route.ts index 24a7497f..ba4213a6 100644 --- a/src/app/api/new/portofolio/[id]/route.ts +++ b/src/app/api/new/portofolio/[id]/route.ts @@ -1,9 +1,6 @@ -import { DIRECTORY_ID, prisma } from "@/app/lib"; -import { NextResponse } from "next/server"; -import fs from "fs"; -import { funGlobal_DeleteFileById } from "@/app_modules/_global/fun"; -import { apiDeleteImageById } from "@/app_modules/_global/lib/api_image"; +import { prisma } from "@/app/lib"; import backendLogger from "@/util/backendLogger"; +import { NextResponse } from "next/server"; export const dynamic = "force-dynamic"; // GET ONE DATA PORTOFOLIO BY ID PORTOFOLIO diff --git a/src/app/lib/prisma.ts b/src/app/lib/prisma.ts index 101fd93b..69fef907 100644 --- a/src/app/lib/prisma.ts +++ b/src/app/lib/prisma.ts @@ -20,8 +20,8 @@ if (process.env.NODE_ENV !== "production") { } process.on("SIGINT", async () => { - console.log("Disconnecting PrismaClient..."); - await prisma.$disconnect();3 + // console.log("Disconnecting PrismaClient..."); + await prisma.$disconnect(); process.exit(0); }); diff --git a/src/app/zCoba/upload/fun_upload.ts b/src/app/zCoba/upload/fun_upload.ts deleted file mode 100644 index baa3e4e2..00000000 --- a/src/app/zCoba/upload/fun_upload.ts +++ /dev/null @@ -1,52 +0,0 @@ -"use server"; - -import _ from "lodash"; -// import { v4 } from "uuid"; -import fs from "fs"; -import sharp from "sharp"; - -export default async function fun_upload({ - file, - dirId, -}: { - file: File; - dirId: string; -}) { - // const file: any = formData.get("file"); - // const fName = file.name; - // const fileSize = file.size; - - // // Convert ke KB - // const fileSizeInKB = fileSize / 1024; - - // // Convert ke MB - // const fileSizeInMB = fileSize / (1024 * 1024); - - // console.log(`Ukuran file dalam bytes: ${fileSize}`); - // console.log(`Ukuran file dalam KB: ${fileSizeInKB.toFixed(2)} KB`); - // console.log(`Ukuran file dalam MB: ${fileSizeInMB.toFixed(2)} MB`); - - const imageBuffer = await file.arrayBuffer(); - const resize = await sharp(imageBuffer).resize(2000).toBuffer(); - - const newFile = Buffer.from(resize); - console.log("file new",newFile); - // fs.writeFileSync(`./public/upload/${fName}`, upFolder as any); - - const formData = new FormData(); - formData.append("file", file); - formData.append("dirId", dirId); - - // const upload = await fetch("/api/image/upload", { - // method: "POST", - // body: formData, - // }); - - // 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 }; - // } -} diff --git a/src/app/zCoba/upload/page.tsx b/src/app/zCoba/upload/page.tsx index 26b6bfdc..34ee4314 100644 --- a/src/app/zCoba/upload/page.tsx +++ b/src/app/zCoba/upload/page.tsx @@ -2,9 +2,7 @@ import { MainColor } from "@/app_modules/_global/color"; import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/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_UploadToStorage } from "@/app_modules/_global/fun"; import { UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate, @@ -20,8 +18,6 @@ import { } from "@mantine/core"; import { IconImageInPicture, IconUpload } from "@tabler/icons-react"; import { useState } from "react"; -import fun_upload from "./fun_upload"; -import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun"; export default function Page() { return ( diff --git a/src/app_modules/_global/button/comp_button_upload_photo.tsx b/src/app_modules/_global/button/comp_button_upload_photo.tsx index fa1185d0..f2cad723 100644 --- a/src/app_modules/_global/button/comp_button_upload_photo.tsx +++ b/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) => ( diff --git a/src/app_modules/_global/fun/delete/fun_delete_file_by_id.tsx b/src/app_modules/_global/fun/delete/fun_delete_file_by_id.tsx index 27e9c8a0..ced99c38 100644 --- a/src/app_modules/_global/fun/delete/fun_delete_file_by_id.tsx +++ b/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(); diff --git a/src/app_modules/_global/fun/index.ts b/src/app_modules/_global/fun/index.ts index 2a0bb482..7a6106b5 100644 --- a/src/app_modules/_global/fun/index.ts +++ b/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 }; diff --git a/src/app_modules/_global/fun/upload/fun_upload_to_storage.ts b/src/app_modules/_global/fun/upload/fun_upload_to_storage.ts index 8df2359c..1b81245f 100644 --- a/src/app_modules/_global/fun/upload/fun_upload_to_storage.ts +++ b/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" }; } } diff --git a/src/app_modules/_global/fun/upload/fun_validasi_upload_created_file.ts b/src/app_modules/_global/fun/upload/fun_validasi_upload_created_file.ts index 228fd510..5cec4050 100644 --- a/src/app_modules/_global/fun/upload/fun_validasi_upload_created_file.ts +++ b/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, }); diff --git a/src/app_modules/_global/lib/api_image.ts b/src/app_modules/_global/lib/api_image.ts deleted file mode 100644 index 23e35b78..00000000 --- a/src/app_modules/_global/lib/api_image.ts +++ /dev/null @@ -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); -}; diff --git a/src/app_modules/job/component/button/comp_button_save_create.tsx b/src/app_modules/job/component/button/comp_button_save_create.tsx index ccbe263c..ab349454 100644 --- a/src/app_modules/job/component/button/comp_button_save_create.tsx +++ b/src/app_modules/job/component/button/comp_button_save_create.tsx @@ -11,6 +11,7 @@ import { ComponentGlobal_NotifikasiPeringatan, } from "@/app_modules/_global/notif_global"; import { notifikasiToAdmin_funCreate } from "@/app_modules/notifikasi/fun"; +import { clientLogger } from "@/util/clientLogger"; import { Button } from "@mantine/core"; import { useAtom } from "jotai"; import { useRouter } from "next/navigation"; @@ -19,7 +20,6 @@ import { WibuRealtime } from "wibu-pkg"; import { job_funCreateNoFile, job_funCreateWithFile } from "../../fun"; import { gs_job_hot_menu } from "../../global_state"; import { MODEL_JOB } from "../../model/interface"; -import { envs } from "@/lib/envs"; function Job_ComponentButtonSaveCreate({ value, @@ -71,6 +71,8 @@ function Job_ComponentButtonSaveCreate({ ComponentGlobal_NotifikasiBerhasil(createNoFile.message); } } else { + setIsLoading(false); + ComponentGlobal_NotifikasiGagal(createNoFile.message); } } else { @@ -80,6 +82,7 @@ function Job_ComponentButtonSaveCreate({ }); if (!uploadFile.success) { + setIsLoading(false); ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar"); return; } @@ -120,15 +123,13 @@ function Job_ComponentButtonSaveCreate({ ComponentGlobal_NotifikasiBerhasil(createWithFile.message); } } else { + setIsLoading(false); ComponentGlobal_NotifikasiGagal(createWithFile.message); } } } catch (error) { - console.log(error); - } finally { - if (window.location.pathname !== RouterJob.status({ id: "2" })) { - setIsLoading(false); - } + setIsLoading(false); + clientLogger.error("Error create job", error); } } diff --git a/src/app_modules/job/component/button/comp_button_update_data.tsx b/src/app_modules/job/component/button/comp_button_update_data.tsx index 919b2470..baefd64d 100644 --- a/src/app_modules/job/component/button/comp_button_update_data.tsx +++ b/src/app_modules/job/component/button/comp_button_update_data.tsx @@ -17,6 +17,7 @@ import { useState } from "react"; import { job_EditById } from "../../fun/edit/fun_edit_by_id"; import { gs_job_hot_menu } from "../../global_state"; import { MODEL_JOB } from "../../model/interface"; +import { clientLogger } from "@/util/clientLogger"; export function Job_ComponentButtonUpdateData({ value, @@ -32,41 +33,56 @@ export function Job_ComponentButtonUpdateData({ const [opened, { open, close }] = useDisclosure(false); async function onUpdate() { - if (file === null) { - const update = await job_EditById({ - data: value, - }); - if (update.status !== 200) - return ComponentGlobal_NotifikasiGagal(update.message); - } else { - const uploadFile = await funGlobal_UploadToStorage({ - file: file, - dirId: DIRECTORY_ID.job_image, - }); + try { + setIsLoading(true); - if (!uploadFile.success) - return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar"); - - if (value.imageId !== null) { - const delFile = await funGlobal_DeleteFileById({ - fileId: value.imageId, + if (file === null) { + const update = await job_EditById({ + data: value, }); - if (!delFile.success) - ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar lama"); + if (update.status !== 200) + return ComponentGlobal_NotifikasiGagal(update.message); + } else { + const uploadFile = await funGlobal_UploadToStorage({ + file: file, + dirId: DIRECTORY_ID.job_image, + }); + + if (!uploadFile.success) { + setIsLoading(false); + ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar"); + return; + } + + if (value.imageId !== null) { + const delFile = await funGlobal_DeleteFileById({ + fileId: value.imageId, + }); + if (!delFile.success) { + clientLogger.error("Error delete file:", delFile.message); + } + } + + const updateWithFile = await job_EditById({ + data: value, + fileId: uploadFile.data.id, + }); + + if (updateWithFile.status !== 200) { + setIsLoading(false); + ComponentGlobal_NotifikasiGagal(updateWithFile.message); + return; + } } - const updateWithFile = await job_EditById({ - data: value, - fileId: uploadFile.data.id, - }); - if (updateWithFile.status !== 200) - return ComponentGlobal_NotifikasiGagal(updateWithFile.message); + setHotMenu(2); + ComponentGlobal_NotifikasiBerhasil("Berhasil Update"); + router.back(); + } catch (error) { + setIsLoading(false); + clientLogger.error("Error update job:", error); + ComponentGlobal_NotifikasiGagal("Gagal update job"); } - - setHotMenu(2); - setIsLoading(true); - router.back(); - return ComponentGlobal_NotifikasiBerhasil("Berhasil Update"); } return ( diff --git a/src/app_modules/job/create/view.tsx b/src/app_modules/job/create/view.tsx index 7a84194f..1a7858d2 100644 --- a/src/app_modules/job/create/view.tsx +++ b/src/app_modules/job/create/view.tsx @@ -2,15 +2,13 @@ import { AspectRatio, - Button, Center, - FileButton, Image, Stack, Text, TextInput, } from "@mantine/core"; -import { IconCamera, IconUpload } from "@tabler/icons-react"; +import { IconPhoto } from "@tabler/icons-react"; import dynamic from "next/dynamic"; import { useState } from "react"; import "react-quill/dist/quill.snow.css"; @@ -21,22 +19,15 @@ const ReactQuill = dynamic( { ssr: false } ); -import { - AccentColor, - MainColor, -} from "@/app_modules/_global/color/color_pallet"; - import { ComponentGlobal_BoxInformation, ComponentGlobal_BoxUploadImage, + ComponentGlobal_ButtonUploadFileImage, ComponentGlobal_CardStyles, ComponentGlobal_InputCountDown, } from "@/app_modules/_global/component"; import { Job_ComponentButtonSaveCreate } from "../component"; import { defaultDeskripsi, defaultSyarat } from "../component/default_value"; -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"; export default function Job_Create() { const [value, setValue] = useState({ @@ -55,7 +46,7 @@ export default function Job_Create() { - + {img ? ( @@ -68,53 +59,16 @@ export default function Job_Create() { ) : ( - - - Upload Gambar - + )}
- { - try { - const buffer = URL.createObjectURL( - new Blob([new Uint8Array(await files.arrayBuffer())]) - ); - - if (files.size > MAX_SIZE) { - ComponentGlobal_NotifikasiPeringatan( - PemberitahuanMaksimalFile - ); - setImg(null); - - return; - } - - setImg(buffer); - setFile(files); - } catch (error) { - console.log(error); - } - }} - accept="image/png,image/jpeg" - > - {(props) => ( - - )} - +
diff --git a/src/app_modules/job/edit/view.tsx b/src/app_modules/job/edit/view.tsx index 04c9ca2e..9556a825 100644 --- a/src/app_modules/job/edit/view.tsx +++ b/src/app_modules/job/edit/view.tsx @@ -10,28 +10,25 @@ import { Text, TextInput, } from "@mantine/core"; -import { IconCamera, IconUpload } from "@tabler/icons-react"; +import { IconCamera } from "@tabler/icons-react"; import { useState } from "react"; import { MODEL_JOB } from "../model/interface"; -import { APIs } from "@/app/lib"; import { AccentColor, MainColor, } from "@/app_modules/_global/color/color_pallet"; import { ComponentGlobal_BoxUploadImage, + ComponentGlobal_ButtonUploadFileImage, ComponentGlobal_CardStyles, ComponentGlobal_LoadImage, - ComponentGlobal_LoadImageCustom, } from "@/app_modules/_global/component"; import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown"; +import { IconPhoto } from "@tabler/icons-react"; import dynamic from "next/dynamic"; import "react-quill/dist/quill.snow.css"; -import { - Job_ComponentBoxUploadImage, - Job_ComponentButtonUpdate, -} from "../component"; +import { Job_ComponentButtonUpdate } from "../component"; const ReactQuill = dynamic( () => { return import("react-quill"); @@ -51,7 +48,7 @@ export default function Job_Edit({ dataJob }: { dataJob: MODEL_JOB }) { return ( <> - + {img ? ( @@ -66,44 +63,16 @@ export default function Job_Edit({ dataJob }: { dataJob: MODEL_JOB }) { ) : ( - - - Upload Gambar - + )}
- { - try { - const buffer = URL.createObjectURL( - new Blob([new Uint8Array(await files.arrayBuffer())]) - ); - - setImg(buffer); - setFile(files); - } catch (error) { - console.log(error); - } - }} - accept="image/png,image/jpeg" - > - {(props) => ( - - )} - +
diff --git a/src/middleware.ts b/src/middleware.ts index f616cb2a..bbabbb1d 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -29,7 +29,7 @@ const middlewareConfig: MiddlewareConfig = { "/api/collaboration/*", "/api/notifikasi/*", "/api/logs/*", - "/api/image/*", + // "/api/image/*", "/api/job/*", "/api/auth/*", "/api/origin-url", From cdc548885de1b1b8c462d161132effc6afdf903d Mon Sep 17 00:00:00 2001 From: Bagasbanuna02 Date: Mon, 13 Jan 2025 15:57:25 +0800 Subject: [PATCH 2/3] fix ( upload image ) deskripsi: - menyederhanakan upload image saat create profile --- src/app/lib/id-derectory.ts | 4 +- .../button/comp_button_upload_photo.tsx | 4 +- .../button/comp_create_new_profile.tsx | 49 +++++-- .../katalog/profile/create/view.tsx | 20 +-- .../profile/create/view_upload_background.tsx | 128 ++---------------- .../profile/create/view_upload_foto.tsx | 34 ++--- 6 files changed, 80 insertions(+), 159 deletions(-) diff --git a/src/app/lib/id-derectory.ts b/src/app/lib/id-derectory.ts index f2c1303f..dc430470 100644 --- 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", diff --git a/src/app_modules/_global/button/comp_button_upload_photo.tsx b/src/app_modules/_global/button/comp_button_upload_photo.tsx index f2cad723..2d6f1a6f 100644 --- 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" diff --git 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 index ea9f8602..8aadaef3 100644 --- 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); } } diff --git a/src/app_modules/katalog/profile/create/view.tsx b/src/app_modules/katalog/profile/create/view.tsx index 7751a451..887b0997 100644 --- 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(null); const [imgPP, setImgPP] = useState(); + const [fileBG, setFileBG] = useState(null); const [imgBG, setImgBG] = useState(); - const [fotoProfileId, setFotoProfileId] = useState(""); - const [backgroundProfileId, setBackgroundProfileId] = useState(""); const [value, setValue] = useState({ name: "", @@ -29,15 +29,15 @@ export default function CreateProfile() { @@ -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() { diff --git a/src/app_modules/katalog/profile/create/view_upload_background.tsx b/src/app_modules/katalog/profile/create/view_upload_background.tsx index 84347823..2c81de88 100644 --- 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({ ) : ( - - - Upload Background - + )}
- { - 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) => ( - - )} - +
diff --git a/src/app_modules/katalog/profile/create/view_upload_foto.tsx b/src/app_modules/katalog/profile/create/view_upload_foto.tsx index 67536188..6e4cfa0c 100644 --- 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 ( <> - +
{imgPP != undefined || imgPP != null ? ( @@ -70,6 +63,13 @@ export default function Profile_ViewUploadFoto({
+ +
+ + {/*
{ try { @@ -186,7 +186,7 @@ export default function Profile_ViewUploadFoto({ )} -
+ */} From 7f40b7bb33fca272efbd3b2aa7dde39d518f30c2 Mon Sep 17 00:00:00 2001 From: Bagasbanuna02 Date: Tue, 14 Jan 2025 11:01:52 +0800 Subject: [PATCH 3/3] fix ( upload image ) deskripsi: - fix upload image portofolio --- .../_global/component/box_information.tsx | 15 +- .../button/comp_button_edit_logo_bisnis.tsx | 56 ++-- .../button/comp_button_selanjutnya.tsx | 31 ++- .../katalog/portofolio/create/view.tsx | 57 ++-- .../portofolio/edit/logo/ui_edit_logo.tsx | 86 ++---- .../profile/upload/foto_profile/index.tsx | 1 + .../button/comp_button_save_pin.tsx | 26 +- .../button/comp_button_update_data_map.tsx | 23 +- src/app_modules/map/ui/ui_create_pin.tsx | 259 +++++++----------- src/app_modules/map/ui/ui_custom_pin.tsx | 77 ++---- src/app_modules/map/ui/ui_edit_map.tsx | 171 +++++++----- 11 files changed, 364 insertions(+), 438 deletions(-) diff --git a/src/app_modules/_global/component/box_information.tsx b/src/app_modules/_global/component/box_information.tsx index 188167b7..8dbe0a0b 100644 --- a/src/app_modules/_global/component/box_information.tsx +++ b/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({ ) : ( - - - *{" "} + + + + + {informasi} - - + + )} ); - - } diff --git 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 index c6c85b60..cbceaa63 100644 --- 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 ? ( + - ) : ( - - )} + ); } diff --git a/src/app_modules/katalog/portofolio/component/button/comp_button_selanjutnya.tsx b/src/app_modules/katalog/portofolio/component/button/comp_button_selanjutnya.tsx index 823c1f29..ccf7c19a 100644 --- 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 ( <> )} - + */} @@ -416,7 +420,8 @@ export default function CreatePortofolio({ dataPortofolio={dataPortofolio as any} dataMedsos={dataMedsos} profileId={profileId} - imageId={imageId} + // + file={file as File} /> diff --git a/src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx b/src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx index cae4cb08..cb2f4867 100644 --- 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 ( <> - - + + {img ? ( Image ) : ( )} - -
- { - 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) => ( - - )} - -
- - + +
+ +
+ + (null); const [img, setImg] = useState(null); - const [imageId, setImageId] = useState(""); return ( <> - - { - setLatLong([a.lngLat.lat, a.lngLat.lng]); - setIsPin(true); - }} - attributionControl={false} - > - + {/* Map Pin */} + + + { + setLatLong([a.lngLat.lat, a.lngLat.lng]); + setIsPin(true); + }} + attributionControl={false} > - - image - - - - - - + + + image + + + + + + - - { - setNamePin(_.startCase(val.currentTarget.value)); + - + > + { + setNamePin(_.startCase(val.currentTarget.value)); + }} + /> + + - + + {img ? ( @@ -138,100 +147,16 @@ export function UiMap_CreatePin({ ) : ( - Foto Lokasi Bisnis - - Upload foto lokasi bisnis anda untuk ditampilkan dalam detail - map - + )}
- { - try { - 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) => ( - - )} - +
@@ -240,7 +165,7 @@ export function UiMap_CreatePin({ lat={lat as any} long={long as any} portofolioId={portofolioId} - imageId={imageId} + file={file as File} /> diff --git a/src/app_modules/map/ui/ui_custom_pin.tsx b/src/app_modules/map/ui/ui_custom_pin.tsx index 93ccb1b7..7486badf 100644 --- a/src/app_modules/map/ui/ui_custom_pin.tsx +++ b/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 { RouterMap } from "@/app/lib/router_hipmi/router_map"; +import { APIs, DIRECTORY_ID } from "@/app/lib"; 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 { IconCamera } from "@tabler/icons-react"; +import { clientLogger } from "@/util/clientLogger"; +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({ @@ -90,40 +86,10 @@ export function UiMap_CustomPin({ )}
- { - try { - 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) => ( - - )} - +
@@ -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, diff --git a/src/app_modules/map/ui/ui_edit_map.tsx b/src/app_modules/map/ui/ui_edit_map.tsx index 8d84794c..a82f677f 100644 --- a/src/app_modules/map/ui/ui_edit_map.tsx +++ b/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,89 +50,100 @@ export function UiMap_EditMap({ return ( <> - - { - setData({ - ...data, - latitude: a.lngLat.lat, - longitude: a.lngLat.lng, - }); - }} - attributionControl={false} - > - + + + + - - - - - - - - - { + style={{ + cursor: "pointer", + width: "100%", + height: "60vh", + borderRadius: "10px", + }} + onClick={(a) => { setData({ ...data, - namePin: val.currentTarget.value, + latitude: a.lngLat.lat, + longitude: a.lngLat.lng, }); }} - /> - + attributionControl={false} + > + + + + + + + + + + { + setData({ + ...data, + namePin: val.currentTarget.value, + }); + }} + /> + + {/* Photo Usaha */} - + {img ? ( @@ -144,6 +156,13 @@ export function UiMap_EditMap({
+ +
+ + {/*
{ try { @@ -178,7 +197,7 @@ export function UiMap_EditMap({ )} -
+ */}