Fix: Upload image
- Upload image berita ke server wibu - Tampilan detail image di ambil dari server wibu ## No issue
This commit is contained in:
@@ -1,41 +1,40 @@
|
||||
"use client";
|
||||
|
||||
import { DIRECTORY_ID } from "@/app/lib";
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import {
|
||||
AccentColor,
|
||||
MainColor,
|
||||
} from "@/app_modules/_global/color/color_pallet";
|
||||
import { MainColor } from "@/app_modules/_global/color/color_pallet";
|
||||
import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
|
||||
import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
|
||||
import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
|
||||
import {
|
||||
ComponentGlobal_WarningMaxUpload,
|
||||
maksimalUploadFile,
|
||||
} from "@/app_modules/_global/component/waring_popup";
|
||||
funGlobal_DeleteFileById,
|
||||
funGlobal_UploadToStorage,
|
||||
} from "@/app_modules/_global/fun";
|
||||
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
|
||||
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
|
||||
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
|
||||
import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
|
||||
import mqtt_client from "@/util/mqtt_client";
|
||||
import {
|
||||
AspectRatio,
|
||||
Button,
|
||||
Center,
|
||||
FileButton,
|
||||
Group,
|
||||
Image,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Textarea,
|
||||
} from "@mantine/core";
|
||||
import { IconCamera } from "@tabler/icons-react";
|
||||
import { IconCamera, IconUpload } from "@tabler/icons-react";
|
||||
import { useAtom } from "jotai";
|
||||
import _ from "lodash";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { NotifPeringatan } from "../component/notifikasi/notif_peringatan";
|
||||
import { Donasi_funCreate } from "../fun/create/fun_create_donasi";
|
||||
import { gs_donasi_hot_menu, gs_donasi_tabs_posting } from "../global_state";
|
||||
import { MODEL_DONASI_TEMPORARY } from "../model/interface";
|
||||
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
|
||||
import mqtt_client from "@/util/mqtt_client";
|
||||
import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
|
||||
|
||||
export default function CreateCeritaPenggalangDonasi({
|
||||
dataTemporary,
|
||||
userId,
|
||||
@@ -51,7 +50,7 @@ export default function CreateCeritaPenggalangDonasi({
|
||||
);
|
||||
const [donasiHotMenu, setDonasiHotMenu] = useAtom(gs_donasi_hot_menu);
|
||||
|
||||
const [create, setCreate] = useState({
|
||||
const [data, setData] = useState({
|
||||
pembukaan: "",
|
||||
cerita: "",
|
||||
namaBank: "",
|
||||
@@ -59,61 +58,77 @@ export default function CreateCeritaPenggalangDonasi({
|
||||
});
|
||||
const [temporary, setTemporary] = useState(dataTemporary);
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [imageCerita, setImageCerita] = useState<any | null>();
|
||||
const [img, setImg] = useState<any | null>();
|
||||
|
||||
async function onCreate() {
|
||||
if (_.values(create).includes("")) return NotifPeringatan("Lengkapin Data");
|
||||
if (!file) return NotifPeringatan("Lengkapi Gambar");
|
||||
|
||||
const gambar = new FormData();
|
||||
gambar.append("file", file as any);
|
||||
if (_.values(data).includes(""))
|
||||
return ComponentGlobal_NotifikasiPeringatan("Lengkapin Data");
|
||||
|
||||
const body = {
|
||||
id: temporary.id,
|
||||
title: temporary.title,
|
||||
target: temporary.target,
|
||||
imagesId: temporary.imagesId,
|
||||
donasiMaster_KategoriId: temporary.donasiMaster_KategoriId,
|
||||
donasiMaster_DurasiId: temporary.donasiMaster_DurasiId,
|
||||
authorId: userId,
|
||||
namaBank: create.namaBank,
|
||||
rekening: create.rekening,
|
||||
namaBank: data.namaBank,
|
||||
rekening: data.rekening,
|
||||
imageId: temporary.imageId,
|
||||
CeritaDonasi: {
|
||||
pembukaan: create.pembukaan,
|
||||
cerita: create.cerita,
|
||||
pembukaan: data.pembukaan,
|
||||
cerita: data.cerita,
|
||||
},
|
||||
};
|
||||
|
||||
const res = await Donasi_funCreate(body as any, gambar);
|
||||
if (res.status === 201) {
|
||||
const dataNotif: any = {
|
||||
appId: res.data?.id as any,
|
||||
status: res.data?.DonasiMaster_Status?.name as any,
|
||||
userId: res.data?.authorId as any,
|
||||
pesan: res.data?.title as any,
|
||||
kategoriApp: "DONASI",
|
||||
title: "Donasi baru",
|
||||
};
|
||||
|
||||
const notif = await notifikasiToAdmin_funCreate({
|
||||
data: dataNotif as any,
|
||||
try {
|
||||
setLoading(true);
|
||||
const uploadImage = await funGlobal_UploadToStorage({
|
||||
file: file as File,
|
||||
dirId: DIRECTORY_ID.donasi_cerita_image,
|
||||
});
|
||||
if (!uploadImage.success) {
|
||||
setLoading(false);
|
||||
return ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
|
||||
}
|
||||
|
||||
const res = await Donasi_funCreate({
|
||||
data: body as any,
|
||||
fileId: uploadImage.data.id,
|
||||
});
|
||||
|
||||
if (notif.status === 201) {
|
||||
mqtt_client.publish(
|
||||
"ADMIN",
|
||||
JSON.stringify({
|
||||
count: 1,
|
||||
})
|
||||
);
|
||||
setLoading(true);
|
||||
setTabsPostingDonasi("Review");
|
||||
setDonasiHotMenu(1);
|
||||
ComponentGlobal_NotifikasiBerhasil(res.message);
|
||||
router.push(RouterDonasi.main_galang_dana, { scroll: false });
|
||||
if (res.status === 201) {
|
||||
const dataNotif: any = {
|
||||
appId: res.data?.id as any,
|
||||
status: res.data?.DonasiMaster_Status?.name as any,
|
||||
userId: res.data?.authorId as any,
|
||||
pesan: res.data?.title as any,
|
||||
kategoriApp: "DONASI",
|
||||
title: "Donasi baru",
|
||||
};
|
||||
|
||||
const notif = await notifikasiToAdmin_funCreate({
|
||||
data: dataNotif as any,
|
||||
});
|
||||
|
||||
if (notif.status === 201) {
|
||||
mqtt_client.publish(
|
||||
"ADMIN",
|
||||
JSON.stringify({
|
||||
count: 1,
|
||||
})
|
||||
);
|
||||
setTabsPostingDonasi("Review");
|
||||
setDonasiHotMenu(1);
|
||||
ComponentGlobal_NotifikasiBerhasil(res.message);
|
||||
router.push(RouterDonasi.main_galang_dana, { scroll: false });
|
||||
}
|
||||
setLoading(false);
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiGagal(res.message);
|
||||
setLoading(false);
|
||||
}
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiGagal(res.message);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
return (
|
||||
@@ -138,15 +153,15 @@ export default function CreateCeritaPenggalangDonasi({
|
||||
placeholder="Pembuka cerita"
|
||||
maxLength={300}
|
||||
onChange={(val) =>
|
||||
setCreate({
|
||||
...create,
|
||||
setData({
|
||||
...data,
|
||||
pembukaan: val.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<ComponentGlobal_InputCountDown
|
||||
maxInput={300}
|
||||
lengthInput={create.pembukaan.length}
|
||||
lengthInput={data.pembukaan.length}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
@@ -165,32 +180,49 @@ export default function CreateCeritaPenggalangDonasi({
|
||||
placeholder="Ceritakan alasan mengapa harus membuat Penggalangan Dana"
|
||||
maxLength={300}
|
||||
onChange={(val) =>
|
||||
setCreate({
|
||||
...create,
|
||||
setData({
|
||||
...data,
|
||||
cerita: val.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<ComponentGlobal_InputCountDown
|
||||
maxInput={300}
|
||||
lengthInput={create.cerita.length}
|
||||
lengthInput={data.cerita.length}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Stack spacing={"xs"}>
|
||||
<Center>
|
||||
<Stack spacing={5}>
|
||||
<ComponentGlobal_BoxUploadImage>
|
||||
{img ? (
|
||||
<AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
|
||||
<Image
|
||||
style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
|
||||
alt="Foto"
|
||||
height={250}
|
||||
src={img}
|
||||
/>
|
||||
</AspectRatio>
|
||||
) : (
|
||||
<Stack justify="center" align="center" h={"100%"}>
|
||||
<IconUpload color="white" />
|
||||
<Text fz={10} fs={"italic"} c={"white"} fw={"bold"}>
|
||||
Upload Gambar
|
||||
</Text>
|
||||
</Stack>
|
||||
)}
|
||||
</ComponentGlobal_BoxUploadImage>
|
||||
|
||||
{/* Upload Foto */}
|
||||
<Group position="center">
|
||||
<FileButton
|
||||
onChange={async (files: any | null) => {
|
||||
onChange={async (files: any) => {
|
||||
try {
|
||||
const buffer = URL.createObjectURL(
|
||||
new Blob([new Uint8Array(await files.arrayBuffer())])
|
||||
);
|
||||
if (files.size > maksimalUploadFile) {
|
||||
ComponentGlobal_WarningMaxUpload({});
|
||||
} else {
|
||||
setImageCerita(buffer);
|
||||
setFile(files);
|
||||
}
|
||||
setImg(buffer);
|
||||
setFile(files);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
@@ -200,42 +232,17 @@ export default function CreateCeritaPenggalangDonasi({
|
||||
{(props) => (
|
||||
<Button
|
||||
{...props}
|
||||
radius={"xl"}
|
||||
leftIcon={<IconCamera />}
|
||||
leftIcon={<IconCamera color="black" />}
|
||||
radius={50}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
>
|
||||
Upload
|
||||
Upload Gambar
|
||||
</Button>
|
||||
)}
|
||||
</FileButton>
|
||||
</Center>
|
||||
|
||||
{imageCerita ? (
|
||||
<AspectRatio ratio={1 / 1} mah={300}>
|
||||
<Paper
|
||||
style={{
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
backgroundColor: AccentColor.darkblue,
|
||||
padding: "10px",
|
||||
borderRadius: "10px",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
alt="Foto"
|
||||
src={imageCerita ? imageCerita : "/aset/no-img.png"}
|
||||
maw={200}
|
||||
/>
|
||||
</Paper>
|
||||
</AspectRatio>
|
||||
) : (
|
||||
<Center>
|
||||
<Text fs={"italic"} fz={10} c={"white"}>
|
||||
Upload poster atau gambar penggalangan !
|
||||
</Text>
|
||||
</Center>
|
||||
)}
|
||||
</Group>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
@@ -252,8 +259,8 @@ export default function CreateCeritaPenggalangDonasi({
|
||||
label="Nama Bank"
|
||||
maxLength={50}
|
||||
onChange={(val) => {
|
||||
setCreate({
|
||||
...create,
|
||||
setData({
|
||||
...data,
|
||||
namaBank: _.upperCase(val.target.value),
|
||||
});
|
||||
}}
|
||||
@@ -269,8 +276,8 @@ export default function CreateCeritaPenggalangDonasi({
|
||||
label="Nomor rekening"
|
||||
maxLength={100}
|
||||
onChange={(val) => {
|
||||
setCreate({
|
||||
...create,
|
||||
setData({
|
||||
...data,
|
||||
rekening: val.target.value,
|
||||
});
|
||||
}}
|
||||
@@ -280,9 +287,7 @@ export default function CreateCeritaPenggalangDonasi({
|
||||
style={{
|
||||
transition: "0.5s",
|
||||
}}
|
||||
disabled={
|
||||
_.values(create).includes("") || file === null ? true : false
|
||||
}
|
||||
disabled={_.values(data).includes("") || file === null ? true : false}
|
||||
loaderPosition="center"
|
||||
loading={isLoading ? true : false}
|
||||
w={"100%"}
|
||||
|
||||
Reference in New Issue
Block a user