Merge pull request #17 from scalefocus/fix/141_multiple_download_single_file

Multiple Download, download single file as it is

Author: kolev-sf

src/api/api.ts

@@ -314,16 +314,18 @@ export async function downloadObjectsAsZip({
 	objectIds,
 }: {
 	objectIds: string[];
-}): Promise<string> {
+}): Promise<{ href: string; disposition: string }> {
 	const res = await axiosClient.post('/object/downloadZip', {
 		ObjectIds: objectIds,
 	},{
 		responseType: 'blob',
 	});
 
-	const data = URL.createObjectURL(res.data);
-	return data;
-};
+	const href = URL.createObjectURL(res.data);
+	const disposition = res.headers['content-disposition'];
+
+	return { href, disposition };
+}
 
 export const fetchTrashedIds = async ({
 	pageParam,
@@ -346,7 +348,7 @@ export async function trashRestoreObjects({
 	});
 
 	return response.data;
-};
+}
 
 export async function trashDeletePermamnentObjects({
 	objectIds,
@@ -358,10 +360,10 @@ export async function trashDeletePermamnentObjects({
 	});
 
 	return response.data;
-};
+}
 
 export async function emptyTrash(): Promise<boolean> {
 	const response = await axiosClient.delete('emptytrash');
 
 	return response.data;
-};
+}

src/components/ImageGallery.tsx

@@ -138,15 +138,22 @@ export const ImageGallery: React.FC = () => {
 		downloadObjectMutation.mutate(
 			{ objectIds: selectedImages },
 			{
-				onSuccess: (href) => {
-					// create "a" HTML element with href to file & click
+				onSuccess: ({ href, disposition }) => {
+					// Extract filename from Content-Disposition header
+					let filename = 'files.zip';
+					if (disposition) {
+						const match = disposition.match(
+							/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/
+						);
+						if (match && match[1]) 
+							filename = match[1].replace(/['"]/g, '');
+					}
+
 					const link = document.createElement('a');
 					link.href = href;
-					link.setAttribute('download', 'files.zip'); //or any other extension
+					link.setAttribute('download', filename);
 					document.body.appendChild(link);
 					link.click();
-
-					// clean up "a" element & remove ObjectURL
 					document.body.removeChild(link);
 					URL.revokeObjectURL(href);
 				},