fix: download selected image in detail
This commit is contained in:
parent
16c469f72c
commit
035f33250e
|
|
@ -219,55 +219,95 @@ const DetailImage = (data: any) => {
|
||||||
await postActivityLog(data);
|
await postActivityLog(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// const handleDownload = () => {
|
||||||
|
// if (downloadProgress === 0) {
|
||||||
|
// if (!imageSizeSelected) {
|
||||||
|
// alert("Please select an image size before downloading.");
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (!userId) {
|
||||||
|
// router.push("/auth");
|
||||||
|
// } else {
|
||||||
|
// sendActivityLog(2);
|
||||||
|
// sendActivityLog(3);
|
||||||
|
|
||||||
|
// if (isDownloadAll) {
|
||||||
|
// let url: string;
|
||||||
|
// const baseId = slug.split("-")?.[0];
|
||||||
|
|
||||||
|
// // if (type === "1") {
|
||||||
|
// // url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}&resolution=${resolutionSelected}`;
|
||||||
|
// // } else if (type === "2") {
|
||||||
|
// url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}&resolution=${imageSizeSelected}`;
|
||||||
|
// // } else {
|
||||||
|
// // url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}`;
|
||||||
|
// // }
|
||||||
|
|
||||||
|
// downloadFile(url, "FileDownload.zip");
|
||||||
|
// } else {
|
||||||
|
// if (isFromSPIT && main?.url?.includes("spit.humas")) {
|
||||||
|
// downloadFile(`${main?.url}`, `${main.names}`);
|
||||||
|
// } else {
|
||||||
|
// // const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=video&resolution=${resolutionSelected}p`;
|
||||||
|
// // downloadFile(url, `${main.names}`);
|
||||||
|
// const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=image&resolution=${imageSizeSelected}`;
|
||||||
|
// downloadFile(url, `${main.names}`);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// // } else if (type === "1" && resolutionSelected?.length > 0) {
|
||||||
|
// // if (isFromSPIT && main?.url?.includes("spit.humas")) {
|
||||||
|
// // downloadFile(`${main?.url}`, `${main.names}`);
|
||||||
|
// // } else {
|
||||||
|
// // const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=video&resolution=${resolutionSelected}p`;
|
||||||
|
// // downloadFile(url, `${main.names}`);
|
||||||
|
// // }
|
||||||
|
// // } else if (type === "2" && imageSizeSelected?.length > 0) {
|
||||||
|
// // const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=image&resolution=${imageSizeSelected}`;
|
||||||
|
// // downloadFile(url, `${main.names}`);
|
||||||
|
// // } else if (type === "3" || type === "4") {
|
||||||
|
// // downloadFile(`${main?.url}`, `${main.names}`);
|
||||||
|
// // }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
const handleDownload = () => {
|
const handleDownload = () => {
|
||||||
if (downloadProgress === 0) {
|
if (downloadProgress !== 0) return;
|
||||||
if (!imageSizeSelected) {
|
|
||||||
alert("Please select an image size before downloading.");
|
if (!imageSizeSelected) {
|
||||||
|
alert("Please select an image size before downloading.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!userId) {
|
||||||
|
router.push("/auth");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
sendActivityLog(2);
|
||||||
|
sendActivityLog(3);
|
||||||
|
|
||||||
|
if (isDownloadAll) {
|
||||||
|
const baseId = slug.split("-")?.[0];
|
||||||
|
const url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}&resolution=${imageSizeSelected}`;
|
||||||
|
downloadFile(url, "FileDownload.zip");
|
||||||
|
} else {
|
||||||
|
const selectedFile = detailDataImage?.files?.[selectedImage];
|
||||||
|
|
||||||
|
if (!selectedFile) {
|
||||||
|
toast({
|
||||||
|
description: "Gambar tidak ditemukan.",
|
||||||
|
variant: "destructive",
|
||||||
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!userId) {
|
if (isFromSPIT && selectedFile?.url?.includes("spit.humas")) {
|
||||||
router.push("/auth");
|
downloadFile(selectedFile.url, selectedFile.names || "image.jpg");
|
||||||
} else {
|
} else {
|
||||||
sendActivityLog(2);
|
const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${selectedFile.id}&operation=file&type=image&resolution=${imageSizeSelected}`;
|
||||||
sendActivityLog(3);
|
downloadFile(url, selectedFile.names || "image.jpg");
|
||||||
|
|
||||||
if (isDownloadAll) {
|
|
||||||
let url: string;
|
|
||||||
const baseId = slug.split("-")?.[0];
|
|
||||||
|
|
||||||
// if (type === "1") {
|
|
||||||
// url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}&resolution=${resolutionSelected}`;
|
|
||||||
// } else if (type === "2") {
|
|
||||||
url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}&resolution=${imageSizeSelected}`;
|
|
||||||
// } else {
|
|
||||||
// url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}`;
|
|
||||||
// }
|
|
||||||
|
|
||||||
downloadFile(url, "FileDownload.zip");
|
|
||||||
} else {
|
|
||||||
if (isFromSPIT && main?.url?.includes("spit.humas")) {
|
|
||||||
downloadFile(`${main?.url}`, `${main.names}`);
|
|
||||||
} else {
|
|
||||||
// const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=video&resolution=${resolutionSelected}p`;
|
|
||||||
// downloadFile(url, `${main.names}`);
|
|
||||||
const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=image&resolution=${imageSizeSelected}`;
|
|
||||||
downloadFile(url, `${main.names}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// } else if (type === "1" && resolutionSelected?.length > 0) {
|
|
||||||
// if (isFromSPIT && main?.url?.includes("spit.humas")) {
|
|
||||||
// downloadFile(`${main?.url}`, `${main.names}`);
|
|
||||||
// } else {
|
|
||||||
// const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=video&resolution=${resolutionSelected}p`;
|
|
||||||
// downloadFile(url, `${main.names}`);
|
|
||||||
// }
|
|
||||||
// } else if (type === "2" && imageSizeSelected?.length > 0) {
|
|
||||||
// const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=image&resolution=${imageSizeSelected}`;
|
|
||||||
// downloadFile(url, `${main.names}`);
|
|
||||||
// } else if (type === "3" || type === "4") {
|
|
||||||
// downloadFile(`${main?.url}`, `${main.names}`);
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -552,7 +592,23 @@ const DetailImage = (data: any) => {
|
||||||
<Skeleton className="rounded-lg w-[120px] h-[90px]" />
|
<Skeleton className="rounded-lg w-[120px] h-[90px]" />
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="py-4 flex flex-row gap-3">
|
// <div className="py-4 flex flex-row gap-3">
|
||||||
|
// {detailDataImage?.files?.map((file: any, index: number) => (
|
||||||
|
// <a onClick={() => setSelectedImage(index)} key={file?.id}>
|
||||||
|
// <Image
|
||||||
|
// placeholder={`data:image/svg+xml;base64,${toBase64(
|
||||||
|
// shimmer(700, 475)
|
||||||
|
// )}`}
|
||||||
|
// width={1920}
|
||||||
|
// height={1080}
|
||||||
|
// alt="image-small"
|
||||||
|
// src={file?.url}
|
||||||
|
// className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600"
|
||||||
|
// />
|
||||||
|
// </a>
|
||||||
|
// ))}
|
||||||
|
// </div>
|
||||||
|
<div className="py-4 px-1 flex flex-row gap-3 flex-wrap">
|
||||||
{detailDataImage?.files?.map((file: any, index: number) => (
|
{detailDataImage?.files?.map((file: any, index: number) => (
|
||||||
<a onClick={() => setSelectedImage(index)} key={file?.id}>
|
<a onClick={() => setSelectedImage(index)} key={file?.id}>
|
||||||
<Image
|
<Image
|
||||||
|
|
@ -563,7 +619,9 @@ const DetailImage = (data: any) => {
|
||||||
height={1080}
|
height={1080}
|
||||||
alt="image-small"
|
alt="image-small"
|
||||||
src={file?.url}
|
src={file?.url}
|
||||||
className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600"
|
className={`w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 ${
|
||||||
|
selectedImage === index ? "ring-2 ring-red-600" : ""
|
||||||
|
}`}
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
))}
|
))}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue