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 { NextResponse } from "next/server";
import sharp from "sharp"; import sharp from "sharp";
export async function POST(request: Request) { export async function POST(request: Request) {
let fixFormData;
const formData = await request.formData(); 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 valueOfDir = formData.get("dirId");
const keyOfDirectory = await funGetDirectoryNameByValue({ const keyOfDirectory = await funGetDirectoryNameByValue({
@@ -12,30 +16,33 @@ export async function POST(request: Request) {
if (request.method === "POST") { if (request.method === "POST") {
try { try {
const file: any = formData.get("file"); if (mimeType != "application/pdf") {
console.log("ini file baru>", file); // Resize ukuran
const imageBuffer = await file.arrayBuffer();
const resize = await sharp(imageBuffer).resize(2000).toBuffer();
// Resize ukuran // Convert buffer ke Blob
const imageBuffer = await file.arrayBuffer(); const blob = new Blob([resize], { type: file.type });
const resize = await sharp(imageBuffer).resize(2000).toBuffer();
// Convert buffer ke Blob // Convert Blob ke File
const blob = new Blob([resize], { type: file.type }); const resizedFile = new File([blob], file.name, {
type: file.type,
lastModified: new Date().getTime(),
});
// Convert Blob ke File // Buat FormData baru
const resizedFile = new File([blob], file.name, { const newFormData = new FormData();
type: file.type, newFormData.append("file", resizedFile);
lastModified: new Date().getTime(), newFormData.append("dirId", formData.get("dirId") as string);
});
// Buat FormData baru fixFormData = newFormData;
const newFormData = new FormData(); } else {
newFormData.append("file", resizedFile); fixFormData = formData;
newFormData.append("dirId", formData.get("dirId") as string); }
const res = await fetch("https://wibu-storage.wibudev.com/api/upload", { const res = await fetch("https://wibu-storage.wibudev.com/api/upload", {
method: "POST", method: "POST",
body: newFormData, body: fixFormData,
headers: { headers: {
Authorization: `Bearer ${process.env.WS_APIKEY}`, 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"; "use client";
import { clientLogger } from "@/util/clientLogger";
import { Button, FileButton } from "@mantine/core"; import { Button, FileButton } from "@mantine/core";
import { IconCamera } from "@tabler/icons-react"; import { IconCamera } from "@tabler/icons-react";
import { useState } from "react";
import { MainColor } from "../color"; 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({ export function ComponentGlobal_ButtonUploadFileImage({
onSetFile, onSetFile,
@@ -15,22 +13,27 @@ export function ComponentGlobal_ButtonUploadFileImage({
onSetFile: File | any; onSetFile: File | any;
onSetImage: any | null; onSetImage: any | null;
}) { }) {
const [isLoading, setIsLoading] = useState(false);
return ( return (
<FileButton <FileButton
onChange={async (files: any | null) => { onChange={async (files: any | null) => {
try { try {
setIsLoading(true);
const buffer = URL.createObjectURL( const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())]) new Blob([new Uint8Array(await files.arrayBuffer())])
); );
if (files.size > MAX_SIZE) { // if (files.size > MAX_SIZE) {
ComponentGlobal_NotifikasiPeringatan(PemberitahuanMaksimalFile); // ComponentGlobal_NotifikasiPeringatan(PemberitahuanMaksimalFile);
return; // return;
} else { // } else {
onSetFile(files); // }
onSetImage(buffer); onSetFile(files);
} onSetImage(buffer);
setIsLoading(false);
} catch (error) { } catch (error) {
setIsLoading(false);
clientLogger.error("Upload error:", error); clientLogger.error("Upload error:", error);
} }
}} }}
@@ -39,6 +42,8 @@ export function ComponentGlobal_ButtonUploadFileImage({
{(props) => ( {(props) => (
<Button <Button
{...props} {...props}
loading={isLoading}
loaderPosition="center"
radius={"xl"} radius={"xl"}
leftIcon={<IconCamera />} leftIcon={<IconCamera />}
bg={MainColor.yellow} 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 Env_WS_APIKEY = TokenStorage.value;
const allowedMimeTypes = [ 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/png",
"image/jpeg", "image/jpeg",
"image/gif", "image/gif",

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

@@ -12,13 +12,12 @@ import {
} from "@/app_modules/_global/notif_global"; } from "@/app_modules/_global/notif_global";
import { UIGlobal_LayoutDefault } from "@/app_modules/_global/ui"; import { UIGlobal_LayoutDefault } from "@/app_modules/_global/ui";
import { clientLogger } from "@/util/clientLogger"; 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 { useRouter } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import { PhoneInput } from "react-international-phone"; import { PhoneInput } from "react-international-phone";
import "react-international-phone/style.css"; import "react-international-phone/style.css";
export default function Login({ version }: { version: string }) { export default function Login({ version }: { version: string }) {
const router = useRouter(); const router = useRouter();
const [phone, setPhone] = useState(""); const [phone, setPhone] = useState("");
@@ -65,23 +64,30 @@ export default function Login({ version }: { version: string }) {
<> <>
<UIGlobal_LayoutDefault> <UIGlobal_LayoutDefault>
<Stack align="center" justify="center" h={"100vh"} spacing={100}> <Stack align="center" justify="center" h={"100vh"} spacing={100}>
<Stack align="center" spacing={0}> <Stack spacing={0}>
<Title order={3} c={MainColor.yellow}> <Stack align="center" spacing={0}>
WELCOME TO <Title order={3} c={MainColor.yellow}>
</Title> WELCOME TO
<Title order={2} c={MainColor.yellow}>HIPMI BADUNG APPS</Title> </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>
<Stack w={300}> <Stack w={300}>
<Center> <Center>
<Text c={MainColor.white}>Nomor telepon</Text> <Text c={MainColor.white}>Nomor telepon</Text>
</Center> </Center>
<PhoneInput <PhoneInput
countrySelectorStyleProps={{ countrySelectorStyleProps={{
buttonStyle: { buttonStyle: {
backgroundColor: MainColor.login, backgroundColor: MainColor.login,
} },
}} }}
inputStyle={{ width: "100%", backgroundColor: MainColor.login }} inputStyle={{ width: "100%", backgroundColor: MainColor.login }}
defaultCountry="id" 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 { useState } from "react";
import funCreateNewProfile from "../../fun/fun_create_profile"; import funCreateNewProfile from "../../fun/fun_create_profile";
import { MODEL_PROFILE } from "../../model/interface"; import { MODEL_PROFILE } from "../../model/interface";
import { clientLogger } from "@/util/clientLogger";
export function Profile_ComponentCreateNewProfile({ export function Profile_ComponentCreateNewProfile({
value, value,
@@ -48,7 +49,6 @@ export function Profile_ComponentCreateNewProfile({
try { try {
setLoading(true); setLoading(true);
const create = await funCreateNewProfile({ const create = await funCreateNewProfile({
data: newData as any, data: newData as any,
imageId: fotoProfileId, imageId: fotoProfileId,
@@ -57,20 +57,21 @@ export function Profile_ComponentCreateNewProfile({
if (create.status === 201) { if (create.status === 201) {
ComponentGlobal_NotifikasiBerhasil("Berhasil membuat profile", 3000); ComponentGlobal_NotifikasiBerhasil("Berhasil membuat profile", 3000);
router.push(RouterHome.main_home, { scroll: false }); router.replace(RouterHome.main_home, { scroll: false });
} }
if (create.status === 400) { if (create.status === 400) {
setLoading(true);
ComponentGlobal_NotifikasiGagal(create.message); ComponentGlobal_NotifikasiGagal(create.message);
} }
if (create.status === 500) { if (create.status === 500) {
setLoading(true);
ComponentGlobal_NotifikasiGagal(create.message); ComponentGlobal_NotifikasiGagal(create.message);
} }
} catch (error) { } catch (error) {
console.log("Terjadi kesalahan", error); setLoading(true);
} finally { clientLogger.error("Error create new profile:", error);
setLoading(false);
} }
} }

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

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

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

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