134 lines
3.4 KiB
TypeScript
134 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { MainColor } from "@/app_modules/_global/color";
|
|
import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
|
|
import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
|
|
import {
|
|
UIGlobal_LayoutHeaderTamplate,
|
|
UIGlobal_LayoutTamplate,
|
|
} from "@/app_modules/_global/ui";
|
|
import { clientLogger } from "@/util/clientLogger";
|
|
import {
|
|
AspectRatio,
|
|
Button,
|
|
Center,
|
|
FileButton,
|
|
Image,
|
|
Stack,
|
|
} from "@mantine/core";
|
|
import { IconImageInPicture, IconUpload } from "@tabler/icons-react";
|
|
import { useState } from "react";
|
|
|
|
export default function Page() {
|
|
return (
|
|
<>
|
|
<UIGlobal_LayoutTamplate
|
|
header={<UIGlobal_LayoutHeaderTamplate title="Upload" />}
|
|
>
|
|
<Upload />
|
|
</UIGlobal_LayoutTamplate>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function Upload() {
|
|
const [file, setFile] = useState<File | null>(null);
|
|
const [image, setImage] = useState<any | null>(null);
|
|
const [isLoading, setLoading] = useState(false);
|
|
|
|
async function onUpload() {
|
|
if (!file) return alert("File Kosong");
|
|
try {
|
|
setLoading(true);
|
|
const formData = new FormData();
|
|
formData.append("file", file as File);
|
|
|
|
const uploadPhoto = await funGlobal_UploadToStorage({
|
|
file: file,
|
|
dirId: "cm5ohsepe002bq4nlxeejhg7q",
|
|
});
|
|
|
|
if (uploadPhoto.success) {
|
|
setLoading(false);
|
|
alert("berhasil upload");
|
|
console.log("uploadPhoto", uploadPhoto);
|
|
} else {
|
|
setLoading(false);
|
|
console.log("gagal upload", uploadPhoto);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error upload img:", error);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Stack>
|
|
<ComponentGlobal_BoxUploadImage>
|
|
{image ? (
|
|
<AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
|
|
<Image style={{ maxHeight: 250 }} alt="Avatar" src={image} />
|
|
</AspectRatio>
|
|
) : (
|
|
<Center h={"100%"}>
|
|
<IconImageInPicture size={50} />
|
|
</Center>
|
|
)}
|
|
</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
|
|
// );
|
|
// return;
|
|
// } else {
|
|
|
|
// }
|
|
|
|
console.log("ini buffer", buffer);
|
|
|
|
setFile(files);
|
|
setImage(buffer);
|
|
} catch (error) {
|
|
clientLogger.error("Upload error:", error);
|
|
}
|
|
}}
|
|
accept="image/png,image/jpeg"
|
|
>
|
|
{(props) => (
|
|
<Button
|
|
{...props}
|
|
radius={"sm"}
|
|
leftIcon={<IconUpload />}
|
|
bg={MainColor.yellow}
|
|
color="yellow"
|
|
c={"black"}
|
|
>
|
|
Upload
|
|
</Button>
|
|
)}
|
|
</FileButton>
|
|
</Center>
|
|
|
|
<Button
|
|
loaderPosition="center"
|
|
loading={isLoading}
|
|
onClick={() => {
|
|
onUpload();
|
|
}}
|
|
>
|
|
Simpan
|
|
</Button>
|
|
</Stack>
|
|
</>
|
|
);
|
|
}
|