This commit introduces a new feature in the SF.PhotoPixels ap…

src/api/api.ts

@@ -310,6 +310,21 @@ export async function trashObjects({
 	return response.data;
 };
 
+export async function downloadObjectsAsZip({
+	objectIds,
+}: {
+	objectIds: string[];
+}): Promise<string> {
+	const res = await axiosClient.post('/object/downloadZip', {
+		ObjectIds: objectIds,
+	},{
+		responseType: 'blob',
+	});
+
+	const data = URL.createObjectURL(res.data);
+	return data;
+};
+
 export const fetchTrashedIds = async ({
 	pageParam,
 }: {

src/components/ImageGallery.tsx

@@ -28,7 +28,7 @@ import toast from 'react-hot-toast';
 import { useInView } from 'react-intersection-observer';
 import { IThumbnail } from 'types/types';
 
-import { fetchImageIds, trashObjects } from '../api/api';
+import { downloadObjectsAsZip, fetchImageIds, trashObjects } from '../api/api';
 import ImageThumbnail from './ImageThumbnail';
 import Loading from './Loading';
 import Preview from './Preview';
@@ -59,6 +59,19 @@ export const ImageGallery: React.FC = () => {
 		},
 	});
 
+	const downloadObjectMutation = useMutation({
+		mutationFn: downloadObjectsAsZip,
+		onMutate: () => {
+			toast.success('Prepare to download items(s)...');
+		},
+		onSuccess: () => {
+			toast.success('Object(s) downloaded successfully.');
+		},
+		onError: (error) => {
+			toast.error(`Something went wrong: ${error.message}`);
+		},
+	});
+
 	const lastId = data?.pages.slice(-1)[0].lastId;
 	const imageIds = data?.pages.map((page) => page.properties).flat();
 	const lastImage = data?.pages.slice(-1)[0].properties?.slice(-1)[0].id;
@@ -122,9 +135,24 @@ export const ImageGallery: React.FC = () => {
 		);
 	};
 	const handleDownload = () => {
-		// TODO: Implement download logic for selectedImages
-	};
+		downloadObjectMutation.mutate(
+			{ objectIds: selectedImages },
+			{
+				onSuccess: (href) => {
+					// create "a" HTML element with href to file & click
+					const link = document.createElement('a');
+					link.href = href;
+					link.setAttribute('download', 'files.zip'); //or any other extension
+					document.body.appendChild(link);
+					link.click();
 
+					// clean up "a" element & remove ObjectURL
+					document.body.removeChild(link);
+					URL.revokeObjectURL(href);
+				},
+			}
+		);
+	};
 	const theme = useTheme();
 
 	const [openDeleteDialog, setOpenDeleteDialog] = useState(false);