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

Merge pull request #234 from bipproduction/fix/bug/upload

Browse Source 
fix ( upload )
This commit is contained in:
Bagasbanuna02
2025-01-10 17:21:12 +08:00
committed by GitHub
parent cd96214245 60a8435fba
commit 4b46d5d6f5
8 changed files with 94 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/app/api/image/upload/route.ts
View File

@@ -3,7 +3,11 @@ 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({
@@ -12,30 +16,33 @@ export async function POST(request: Request) {
if (request.method === "POST") {
try {
const file: any = formData.get("file");
console.log("ini file baru>", file);
if (mimeType != "application/pdf") {
// Resize ukuran
const imageBuffer = await file.arrayBuffer();
const resize = await sharp(imageBuffer).resize(2000).toBuffer();
// Resize ukuran
const imageBuffer = await file.arrayBuffer();
const resize = await sharp(imageBuffer).resize(2000).toBuffer();
// Convert buffer ke Blob
const blob = new Blob([resize], { type: file.type });
// Convert buffer ke Blob
const blob = new Blob([resize], { type: file.type });
// Convert Blob ke File
const resizedFile = new File([blob], file.name, {
type: file.type,
lastModified: new Date().getTime(),
});
// Convert Blob ke File
const resizedFile = new File([blob], file.name, {
type: file.type,
lastModified: new Date().getTime(),
});
// Buat FormData baru
const newFormData = new FormData();
newFormData.append("file", resizedFile);
newFormData.append("dirId", formData.get("dirId") as string);
// Buat FormData baru
const newFormData = new FormData();
newFormData.append("file", resizedFile);
newFormData.append("dirId", formData.get("dirId") as string);
fixFormData = newFormData;
} else {
fixFormData = formData;
}
const res = await fetch("https://wibu-storage.wibudev.com/api/upload", {
method: "POST",
body: newFormData,
body: fixFormData,
headers: {
Authorization: `Bearer ${process.env.WS_APIKEY}`,
},

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

@@ -1,12 +1,10 @@
"use client";
import { clientLogger } from "@/util/clientLogger";
import { Button, FileButton } from "@mantine/core";
import { IconCamera } from "@tabler/icons-react";
import { useState } from "react";
import { MainColor } from "../color";
import { MAX_SIZE } from "../lib";
import { PemberitahuanMaksimalFile } from "../lib/max_size";
import { ComponentGlobal_NotifikasiPeringatan } from "../notif_global";
import { clientLogger } from "@/util/clientLogger";
export function ComponentGlobal_ButtonUploadFileImage({
onSetFile,
@@ -15,22 +13,27 @@ export function ComponentGlobal_ButtonUploadFileImage({
onSetFile: File | any;
onSetImage: any | null;
}) {
const [isLoading, setIsLoading] = useState(false);
return (
<FileButton
onChange={async (files: any | null) => {
try {
setIsLoading(true);
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > MAX_SIZE) {
ComponentGlobal_NotifikasiPeringatan(PemberitahuanMaksimalFile);
return;
} else {
onSetFile(files);
onSetImage(buffer);
}
// if (files.size > MAX_SIZE) {
// ComponentGlobal_NotifikasiPeringatan(PemberitahuanMaksimalFile);
// return;
// } else {
// }
onSetFile(files);
onSetImage(buffer);
setIsLoading(false);
} catch (error) {
setIsLoading(false);
clientLogger.error("Upload error:", error);
}
}}
@@ -39,6 +42,8 @@ export function ComponentGlobal_ButtonUploadFileImage({
{(props) => (
<Button
{...props}
loading={isLoading}
loaderPosition="center"
radius={"xl"}
leftIcon={<IconCamera />}
bg={MainColor.yellow}

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

@@ -10,6 +10,10 @@ export async function funGlobal_UploadToStorage({
const Env_WS_APIKEY = TokenStorage.value;
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",

26
src/app_modules/auth/login/view.tsx
View File

@@ -12,13 +12,12 @@ import {
} from "@/app_modules/_global/notif_global";
import { UIGlobal_LayoutDefault } from "@/app_modules/_global/ui";
import { clientLogger } from "@/util/clientLogger";
import { Box, Button, Center, Stack, Text, Title } from "@mantine/core";
import { Box, Button, Center, Group, Stack, Text, Title } from "@mantine/core";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { PhoneInput } from "react-international-phone";
import "react-international-phone/style.css";
export default function Login({ version }: { version: string }) {
const router = useRouter();
const [phone, setPhone] = useState("");
@@ -65,23 +64,30 @@ export default function Login({ version }: { version: string }) {
<>
<UIGlobal_LayoutDefault>
<Stack align="center" justify="center" h={"100vh"} spacing={100}>
<Stack align="center" spacing={0}>
<Title order={3} c={MainColor.yellow}>
WELCOME TO
</Title>
<Title order={2} c={MainColor.yellow}>HIPMI BADUNG APPS</Title>
<Stack spacing={0}>
<Stack align="center" spacing={0}>
<Title order={3} c={MainColor.yellow}>
WELCOME TO
</Title>
<Title order={2} c={MainColor.yellow}>
HIPMI BADUNG APPS
</Title>
</Stack>
<Group position="right" w={"100%"}>
<Text c={MainColor.white} ff={"serif"} fz={10}>
powered by muku.id
</Text>
</Group>
</Stack>
<Stack w={300}>
<Center>
<Text c={MainColor.white}>Nomor telepon</Text>
</Center>
<PhoneInput
countrySelectorStyleProps={{
buttonStyle: {
backgroundColor: MainColor.login,
}
},
}}
inputStyle={{ width: "100%", backgroundColor: MainColor.login }}
defaultCountry="id"

11
src/app_modules/katalog/profile/_component/button/comp_create_new_profile.tsx
View File

@@ -14,6 +14,7 @@ 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,
@@ -48,7 +49,6 @@ export function Profile_ComponentCreateNewProfile({
try {
setLoading(true);
const create = await funCreateNewProfile({
data: newData as any,
imageId: fotoProfileId,
@@ -57,20 +57,21 @@ export function Profile_ComponentCreateNewProfile({
if (create.status === 201) {
ComponentGlobal_NotifikasiBerhasil("Berhasil membuat profile", 3000);
router.push(RouterHome.main_home, { scroll: false });
router.replace(RouterHome.main_home, { scroll: false });
}
if (create.status === 400) {
setLoading(true);
ComponentGlobal_NotifikasiGagal(create.message);
}
if (create.status === 500) {
setLoading(true);
ComponentGlobal_NotifikasiGagal(create.message);
}
} catch (error) {
console.log("Terjadi kesalahan", error);
} finally {
setLoading(false);
setLoading(true);
clientLogger.error("Error create new profile:", error);
}
}

27
src/app_modules/katalog/profile/create/view_upload_background.tsx
View File

@@ -8,8 +8,6 @@ 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 { clientLogger } from "@/util/clientLogger";
import {
@@ -20,8 +18,7 @@ import {
FileButton,
Image,
Stack,
Text,
Loader,
Text
} from "@mantine/core";
import { IconCamera, IconUpload } from "@tabler/icons-react";
import { useState } from "react";
@@ -45,11 +42,7 @@ export default function Profile_ViewUploadBackground({
<Stack spacing={"lg"}>
<ComponentGlobal_BoxInformation informasi="Upload foto latar belakang profile anda." />
<ComponentGlobal_BoxUploadImage>
{isLoading ? (
<Center h={"100%"}>
<Loader variant="oval" size={50} color="cyan" />
</Center>
) : imgBG ? (
{imgBG ? (
<AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
<Image
style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
@@ -77,14 +70,14 @@ export default function Profile_ViewUploadBackground({
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > MAX_SIZE) {
ComponentGlobal_NotifikasiPeringatan(
PemberitahuanMaksimalFile
);
onSetImgBG(null);
// if (files.size > MAX_SIZE) {
// ComponentGlobal_NotifikasiPeringatan(
// PemberitahuanMaksimalFile
// );
// onSetImgBG(null);
return;
}
// return;
// }
if (backgroundProfileId != "") {
const deleteFotoBg = await funGlobal_DeleteFileById({
@@ -152,6 +145,8 @@ export default function Profile_ViewUploadBackground({
{(props) => (
<Button
{...props}
loading={isLoading}
loaderPosition="center"
radius={"xl"}
leftIcon={<IconCamera />}
bg={MainColor.yellow}

52
src/app_modules/katalog/profile/create/view_upload_foto.tsx
View File

@@ -5,8 +5,6 @@ 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 { clientLogger } from "@/util/clientLogger";
import {
@@ -15,9 +13,8 @@ import {
Button,
Center,
FileButton,
Loader,
Paper,
Stack,
Stack
} from "@mantine/core";
import { IconCamera } from "@tabler/icons-react";
import { useState } from "react";
@@ -33,7 +30,7 @@ export default function Profile_ViewUploadFoto({
fotoProfileId: string;
onSetFotoProfileId: (id: string) => void;
}) {
const [isLoading, setLoading] = useState(false);
const [isLoadingButton, setLoadingButton] = useState(false);
return (
<>
@@ -41,25 +38,7 @@ export default function Profile_ViewUploadFoto({
<Stack spacing={"lg"}>
<ComponentGlobal_BoxInformation informasi="Upload foto profile anda dengan ukuran maksimal file 3 MB." />
<Center>
{isLoading ? (
<Paper shadow="lg" radius={"100%"}>
<Avatar
variant="light"
color="blue"
size={150}
radius={"100%"}
sx={{
borderStyle: "solid",
borderColor: MainColor.darkblue,
borderWidth: "0.5px",
}}
>
<Center>
<Loader color="cyan" size="xl" />
</Center>
</Avatar>
</Paper>
) : imgPP != undefined || imgPP != null ? (
{imgPP != undefined || imgPP != null ? (
<Paper shadow="lg" radius={"100%"}>
<Avatar
color={"cyan"}
@@ -94,22 +73,22 @@ export default function Profile_ViewUploadFoto({
<FileButton
onChange={async (files: any | null) => {
try {
setLoadingButton(true);
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > MAX_SIZE) {
ComponentGlobal_NotifikasiPeringatan(
PemberitahuanMaksimalFile
);
onSetImgPP(null);
// if (files.size > MAX_SIZE) {
// ComponentGlobal_NotifikasiPeringatan(
// PemberitahuanMaksimalFile
// );
// onSetImgPP(null);
return;
}
// return;
// }
if (fotoProfileId != "") {
try {
setLoading(true);
const deleteFotoProfile = await funGlobal_DeleteFileById({
fileId: fotoProfileId,
dirId: DIRECTORY_ID.profile_foto,
@@ -159,12 +138,9 @@ export default function Profile_ViewUploadFoto({
}
} catch (error) {
clientLogger.error("Client error upload foto:", error);
} finally {
setLoading(false);
}
} else {
try {
setLoading(true);
const uploadPhoto = await funGlobal_UploadToStorage({
file: files,
dirId: DIRECTORY_ID.profile_foto,
@@ -185,12 +161,12 @@ export default function Profile_ViewUploadFoto({
}
} catch (error) {
clientLogger.error("Client error upload foto:", error);
} finally {
setLoading(false);
}
}
} catch (error) {
clientLogger.error("Client error upload foto:", error);
} finally {
setLoadingButton(false);
}
}}
accept="image/png,image/jpeg"
@@ -198,6 +174,8 @@ export default function Profile_ViewUploadFoto({
{(props) => (
<Button
{...props}
loading={isLoadingButton}
loaderPosition="center"
radius={"xl"}
leftIcon={<IconCamera />}
bg={MainColor.yellow}

4
src/app_modules/katalog/profile/edit/view.tsx
View File

@@ -56,7 +56,7 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
return (
<>
<Stack px={"sm"}>
<TextInput
{/* <TextInput
styles={{
label: {
color: MainColor.white,
@@ -92,7 +92,7 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
},
});
}}
/>
/> */}
<TextInput
styles={{