Fix file image

Deskripsi:
- Ukuran file yang di ambil dari server wibu di batasi menjadi maksimal hanya 500kb
This commit is contained in:
2024-12-12 00:49:10 +08:00
parent 01c0e87cd0
commit 9046316b9e
24 changed files with 84 additions and 89 deletions

View File

@@ -17,7 +17,7 @@ export function ComponentMap_LoadImageMap({
const router = useRouter();
const [isImage, setIsImage] = useState<boolean | null>(null);
const url = APIs.GET({ fileId: fileId, size: size });
const url = APIs.GET({ fileId: fileId, size: size ? size : "400" });
useShallowEffect(() => {
onLoadImage();

View File

@@ -16,7 +16,7 @@ import {
Stack,
Text,
TextInput,
Title
Title,
} from "@mantine/core";
import { IconCamera } from "@tabler/icons-react";
import _ from "lodash";
@@ -29,6 +29,8 @@ 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";
export function UiMap_CreatePin({
mapboxToken,
@@ -141,9 +143,12 @@ export function UiMap_CreatePin({
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > 2000000) {
if (files.size > MAX_SIZE) {
setImg(null);
setFile(null);
ComponentGlobal_NotifikasiPeringatan(
"Maaf, Ukuran file terlalu besar, maximum 2mb",
PemberitahuanMaksimalFile,
3000
);
} else {

View File

@@ -27,6 +27,8 @@ import { defaultMapZoom } from "../lib/default_lat_long";
import { MODEL_MAP } from "../lib/interface";
import { APIs, DIRECTORY_ID } from "@/app/lib";
import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
import { MAX_SIZE } from "@/app_modules/_global/lib";
import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
export function UiMap_CustomPin({
dataMap,
@@ -72,8 +74,8 @@ export function UiMap_CustomPin({
radius={"100%"}
src={
data.pinId === null
? APIs.GET({ fileId: data.Portofolio.logoId })
: APIs.GET({ fileId: data.pinId })
? APIs.GET({ fileId: data.Portofolio.logoId, size: "300" })
: APIs.GET({ fileId: data.pinId, size: "300" })
}
style={{
border: `2px solid ${AccentColor.skyblue}`,
@@ -90,9 +92,9 @@ export function UiMap_CustomPin({
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > 2000000) {
if (files.size > MAX_SIZE) {
ComponentGlobal_NotifikasiPeringatan(
"Maaf, Ukuran file terlalu besar, maximum 2mb",
PemberitahuanMaksimalFile,
3000
);
} else {
@@ -155,8 +157,8 @@ export function UiMap_CustomPin({
imgPin
? imgPin
: data.pinId === null
? APIs.GET({ fileId: data.Portofolio.logoId })
: APIs.GET({ fileId: data.pinId })
? APIs.GET({ fileId: data.Portofolio.logoId, size: "300" })
: APIs.GET({ fileId: data.pinId, size: "300" })
}
style={{
border: `2px solid ${AccentColor.softblue}`,

View File

@@ -33,6 +33,8 @@ import Map, {
import { ComponentMap_ButtonUpdateDataMap } from "../_component";
import { defaultMapZoom } from "../lib/default_lat_long";
import { MODEL_MAP } from "../lib/interface";
import { MAX_SIZE } from "@/app_modules/_global/lib";
import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
export function UiMap_EditMap({
mapboxToken,
@@ -85,8 +87,8 @@ export function UiMap_EditMap({
<Avatar
src={
data.pinId === null
? APIs.GET({ fileId: dataMap.Portofolio.logoId })
: APIs.GET({ fileId: data.pinId })
? APIs.GET({ fileId: dataMap.Portofolio.logoId, size: "400" })
: APIs.GET({ fileId: data.pinId, size: "400" })
}
alt="Logo"
style={{
@@ -141,44 +143,6 @@ export function UiMap_EditMap({
)}
</ComponentGlobal_BoxUploadImage>
{/* {img ? (
<AspectRatio ratio={1 / 1} mah={300}>
<Paper
style={{
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
padding: "10px",
borderRadius: "10px",
}}
>
<Image
radius={"sm"}
alt="Photo"
src={img ? img : "/aset/no-img.png"}
maw={250}
/>
</Paper>
</AspectRatio>
) : (
<AspectRatio ratio={1 / 1} mah={300}>
<Paper
style={{
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
padding: "10px",
borderRadius: "10px",
}}
>
<Image
radius={"sm"}
alt="Photo"
src={RouterMap.api_foto + data.imageId}
maw={250}
/>
</Paper>
</AspectRatio>
)} */}
<Center>
<FileButton
onChange={async (files: any | null) => {
@@ -186,9 +150,9 @@ export function UiMap_EditMap({
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > 2000000) {
if (files.size > MAX_SIZE) {
ComponentGlobal_NotifikasiPeringatan(
"Maaf, Ukuran file terlalu besar, maximum 2mb",
PemberitahuanMaksimalFile,
3000
);
} else {

View File

@@ -91,8 +91,8 @@ export function UiMap_MapBoxView({
}}
src={
e.pinId === null
? APIs.GET({ fileId: e.Portofolio.logoId })
: APIs.GET({ fileId: e.pinId })
? APIs.GET({ fileId: e.Portofolio.logoId, size: "300" })
: APIs.GET({ fileId: e.pinId, size: "300" })
}
/>
</Stack>
@@ -110,7 +110,7 @@ export function UiMap_MapBoxView({
opened={openDrawer}
close={() => setOpenDrawer(false)}
mapId={mapId}
component={<ComponentMap_DetailData mapId={mapId} />}
component={<ComponentMap_DetailData mapId={mapId} />}
/>
</>
);

View File

@@ -94,8 +94,8 @@ export function UiMap_MapBoxViewNew({ mapboxToken, }: { mapboxToken: string }) {
}}
src={
e.pinId === null
? APIs.GET({ fileId: e.logoId })
: APIs.GET({ fileId: e.pinId })
? APIs.GET({ fileId: e.logoId, size: "300" })
: APIs.GET({ fileId: e.pinId, size: "300" })
}
/>
</Stack>