Fix file image
Deskripsi: - Ukuran file yang di ambil dari server wibu di batasi menjadi maksimal hanya 500kb
This commit is contained in:
@@ -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();
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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}`,
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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} />}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user