wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix ( upload image )

Browse Source 
deskripsi:
- perbaiki fungsi upload dan delete image di job
This commit is contained in:
Bagasbanuna02
2025-01-13 14:57:15 +08:00
parent 7cb3864aaa
commit 40d69ffc99
16 changed files with 149 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/app_modules/_global/button/comp_button_upload_photo.tsx
View File

@@ -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>

16
src/app_modules/_global/fun/delete/fun_delete_file_by_id.tsx
View File

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

8
src/app_modules/_global/fun/index.ts
View File

@@ -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 };

69
src/app_modules/_global/fun/upload/fun_upload_to_storage.ts
View File

@@ -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" };
}
}

10
src/app_modules/_global/fun/upload/fun_validasi_upload_created_file.ts
View File

@@ -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,
});

16
src/app_modules/_global/lib/api_image.ts
View File

@@ -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);
};

13
src/app_modules/job/component/button/comp_button_save_create.tsx
View File

@@ -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);
}
}

76
src/app_modules/job/component/button/comp_button_update_data.tsx
View File

@@ -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 (

62
src/app_modules/job/create/view.tsx
View File

@@ -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() {
<Stack>
<ComponentGlobal_BoxInformation informasi="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja. " />
<Stack spacing={"xs"}>
<Stack spacing={0}>
<ComponentGlobal_BoxUploadImage>
{img ? (
<AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
@@ -68,53 +59,16 @@ export default function Job_Create() {
</AspectRatio>
) : (
<Stack justify="center" align="center" h={"100%"}>
<IconUpload color="white" />
<Text fz={10} fs={"italic"} c={"white"} fw={"bold"}>
Upload Gambar
</Text>
<IconPhoto size={100} />
</Stack>
)}
</ComponentGlobal_BoxUploadImage>
<Center>
<FileButton
onChange={async (files: any | null) => {
try {
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > MAX_SIZE) {
ComponentGlobal_NotifikasiPeringatan(
PemberitahuanMaksimalFile
);
setImg(null);
return;
}
setImg(buffer);
setFile(files);
} catch (error) {
console.log(error);
}
}}
accept="image/png,image/jpeg"
>
{(props) => (
<Button
{...props}
radius={"xl"}
w={100}
style={{
backgroundColor: MainColor.yellow,
border: `1px solid ${AccentColor.yellow}`,
}}
>
<IconCamera color="black" />
</Button>
)}
</FileButton>
<ComponentGlobal_ButtonUploadFileImage
onSetFile={setFile}
onSetImage={setImg}
/>
</Center>
</Stack>

51
src/app_modules/job/edit/view.tsx
View File

@@ -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 (
<>
<Stack>
<Stack spacing={"xs"}>
<Stack spacing={0}>
<ComponentGlobal_BoxUploadImage>
{img ? (
<AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
@@ -66,44 +63,16 @@ export default function Job_Edit({ dataJob }: { dataJob: MODEL_JOB }) {
<ComponentGlobal_LoadImage fileId={data.imageId} />
) : (
<Stack justify="center" align="center" h={"100%"}>
<IconUpload color="white" />
<Text fz={10} fs={"italic"} c={"white"} fw={"bold"}>
Upload Gambar
</Text>
<IconPhoto size={100} />
</Stack>
)}
</ComponentGlobal_BoxUploadImage>
<Center>
<FileButton
onChange={async (files: any | null) => {
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) => (
<Button
{...props}
radius={"xl"}
w={100}
style={{
backgroundColor: MainColor.yellow,
border: `1px solid ${AccentColor.yellow}`,
}}
>
<IconCamera color="black" />
</Button>
)}
</FileButton>
<ComponentGlobal_ButtonUploadFileImage
onSetFile={setFile}
onSetImage={setImg}
/>
</Center>
</Stack>