diff --git a/frontend/src/components/listing/ListingArtifactRenderer.tsx b/frontend/src/components/listing/ListingArtifactRenderer.tsx
index 4e8a1837..f82ae8b8 100644
--- a/frontend/src/components/listing/ListingArtifactRenderer.tsx
+++ b/frontend/src/components/listing/ListingArtifactRenderer.tsx
@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
import placeholder from "@/components/listing/pics/placeholder.jpg";
import { Artifact } from "@/components/listing/types";
import ROUTES from "@/lib/types/routes";
+import { formatFileSize } from "@/lib/utils/formatters";
interface Props {
artifact: Artifact;
@@ -45,6 +46,11 @@ const ListingArtifactRenderer = ({ artifact }: Props) => {
{artifact.name}
Kernel Image File
+ {artifact.size && (
+
+ {formatFileSize(artifact.size)}
+
+ )}
{new Date(artifact.timestamp * 1000).toLocaleString()}
diff --git a/frontend/src/components/listing/ListingImageGallery.tsx b/frontend/src/components/listing/ListingImageGallery.tsx
index 21537247..6ca3f2b4 100644
--- a/frontend/src/components/listing/ListingImageGallery.tsx
+++ b/frontend/src/components/listing/ListingImageGallery.tsx
@@ -3,8 +3,10 @@ import { FaFileDownload, FaStar, FaTimes } from "react-icons/fa";
import { Artifact } from "@/components/listing/types";
import DeleteConfirmationModal from "@/components/modals/DeleteConfirmationModal";
+import DownloadConfirmationModal from "@/components/modals/DownloadConfirmationModal";
import { useAlertQueue } from "@/hooks/useAlertQueue";
import { useAuthentication } from "@/hooks/useAuth";
+import { formatFileSize } from "@/lib/utils/formatters";
import { Tooltip } from "../ui/ToolTip";
import { Button } from "../ui/button";
@@ -41,6 +43,7 @@ const ListingImageItem = ({
const [isDeleting, setIsDeleting] = useState(false);
const [isUpdating, setIsUpdating] = useState(false);
const [showDeleteModal, setShowDeleteModal] = useState(false);
+ const [showDownloadModal, setShowDownloadModal] = useState(false);
const auth = useAuthentication();
const { addErrorAlert } = useAlertQueue();
@@ -125,8 +128,12 @@ const ListingImageItem = ({
artifact.name.toLowerCase().endsWith(".img") ||
artifact.artifact_type === "kernel";
- const handleDownload = (e: React.MouseEvent) => {
+ const initiateDownload = (e: React.MouseEvent) => {
e.stopPropagation();
+ setShowDownloadModal(true);
+ };
+
+ const handleDownload = () => {
if (!artifact.urls.large) {
addErrorAlert("Artifact URL not available.");
return;
@@ -168,14 +175,10 @@ const ListingImageItem = ({
)}
{isKernelImage && (
-
+