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

Fix upload image profile and portofolio

Browse Source
This commit is contained in:
Bagasbanuna02
2024-12-13 07:37:31 +08:00
parent 03c11c617c
commit 7cbbcd0370
16 changed files with 824 additions and 608 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/app_modules/map/_component/button/comp_button_save_pin.tsx
View File

@@ -4,57 +4,51 @@ import { MainColor } from "@/app_modules/_global/color";
import {
ComponentGlobal_NotifikasiBerhasil,
ComponentGlobal_NotifikasiGagal,
ComponentGlobal_NotifikasiPeringatan,
} from "@/app_modules/_global/notif_global";
import { Button } from "@mantine/core";
import { useRouter } from "next/navigation";
import { map_funCreatePin } from "../../fun/create/fun_create_pin";
import { DIRECTORY_ID } from "@/app/lib";
import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
import { useState } from "react";
import { map_funCreatePin } from "../../fun/create/fun_create_pin";
export function ComponentMap_ButtonSavePin({
namePin,
lat,
long,
portofolioId,
file,
imageId,
}: {
namePin: string;
lat: string;
long: string;
portofolioId: string;
file: File;
imageId: string;
}) {
const router = useRouter();
const [loading, setLoading] = useState(false)
const [loading, setLoading] = useState(false);
async function onSavePin() {
setLoading(true)
const uploadFileToStorage = await funGlobal_UploadToStorage({
file: file,
dirId: DIRECTORY_ID.map_image,
});
try {
setLoading(true);
if (!uploadFileToStorage.success)
return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
const res = await map_funCreatePin({
data: {
latitude: lat as any,
longitude: long as any,
namePin: namePin as any,
imageId: uploadFileToStorage.data.id,
Portofolio: {
create: { id: portofolioId } as any,
const res = await map_funCreatePin({
data: {
latitude: lat as any,
longitude: long as any,
namePin: namePin as any,
imageId: imageId,
Portofolio: {
create: { id: portofolioId } as any,
},
},
},
});
res.status === 200
? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
: ComponentGlobal_NotifikasiGagal(res.message);
setLoading(false)
});
res.status === 200
? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
: ComponentGlobal_NotifikasiGagal(res.message);
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
}
return (
@@ -63,7 +57,7 @@ export function ComponentMap_ButtonSavePin({
loading={loading}
my={"xl"}
style={{ transition: "0.5s" }}
disabled={namePin === "" || file === null ? true : false}
disabled={namePin === "" || imageId == "" ? true : false}
radius={"xl"}
loaderPosition="center"
bg={MainColor.yellow}

65
src/app_modules/map/ui/ui_create_pin.tsx
View File

@@ -5,6 +5,8 @@ import {
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
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/notifikasi_peringatan";
import {
AspectRatio,
@@ -29,8 +31,11 @@ import Map, {
} from "react-map-gl";
import { ComponentMap_ButtonSavePin } from "../_component";
import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long";
import { MAX_SIZE } from "@/app_modules/_global/lib";
import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
import {
funGlobal_DeleteFileById,
funGlobal_UploadToStorage,
} from "@/app_modules/_global/fun";
import { DIRECTORY_ID } from "@/app/lib";
export function UiMap_CreatePin({
mapboxToken,
@@ -42,8 +47,8 @@ export function UiMap_CreatePin({
const [[lat, long], setLatLong] = useState([0, 0]);
const [isPin, setIsPin] = useState(false);
const [namePin, setNamePin] = useState("");
const [file, setFile] = useState<File | any>(null);
const [img, setImg] = useState<any | null>(null);
const [imageId, setImageId] = useState("");
return (
<>
@@ -146,14 +151,60 @@ export function UiMap_CreatePin({
if (files.size > MAX_SIZE) {
setImg(null);
setFile(null);
ComponentGlobal_NotifikasiPeringatan(
PemberitahuanMaksimalFile,
3000
);
return;
}
// if (files.size > MAX_SIZE) {
// setImg(null);
// ComponentGlobal_NotifikasiPeringatan(
// PemberitahuanMaksimalFile,
// 3000
// );
// } else {
// setImg(buffer);
// }
if (imageId != "") {
const deletePhoto = await funGlobal_DeleteFileById({
fileId: imageId,
});
if (deletePhoto.success) {
setImageId("");
const uploadPhoto = await funGlobal_UploadToStorage({
file: files,
dirId: DIRECTORY_ID.map_image,
});
if (uploadPhoto.success) {
setImageId(uploadPhoto.data.id);
setImg(buffer);
} else {
ComponentGlobal_NotifikasiPeringatan(
"Gagal upload gambar"
);
}
}
} else {
setImg(buffer);
setFile(files);
const uploadPhoto = await funGlobal_UploadToStorage({
file: files,
dirId: DIRECTORY_ID.map_image,
});
if (uploadPhoto.success) {
setImageId(uploadPhoto.data.id);
setImg(buffer);
} else {
ComponentGlobal_NotifikasiPeringatan(
"Gagal upload gambar"
);
}
}
} catch (error) {
console.log(error);
@@ -183,7 +234,7 @@ export function UiMap_CreatePin({
lat={lat as any}
long={long as any}
portofolioId={portofolioId}
file={file}
imageId={imageId}
/>
</Stack>
</>