@gradio/gallery 0.18.0 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @gradio/gallery
 
+## 0.19.0
+
+### Features
+
+- [#13566](https://github.com/gradio-app/gradio/pull/13566) [`79b9171`](https://github.com/gradio-app/gradio/commit/79b91718b5c972c174ed042d8b04443bc2274076) - Gallery Download All.  Thanks @dawoodkhan82!
+- [#13543](https://github.com/gradio-app/gradio/pull/13543) [`0533483`](https://github.com/gradio-app/gradio/commit/0533483bccdee38f334a598f18297e8c02966343) - Migrate Image components to Svelte 5.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/statustracker@0.15.1
+- @gradio/icons@0.16.0
+- @gradio/atoms@0.26.0
+- @gradio/image@0.28.0
+- @gradio/video@0.22.0
+- @gradio/client@2.3.1
+- @gradio/upload@0.18.1
+- @gradio/file@0.15.1
+
 ## 0.18.0
 
 ### Features

package/Gallery.test.ts

@@ -1,5 +1,13 @@
 import { test, describe, afterEach, expect, vi } from "vitest";
-import { cleanup, render, fireEvent, waitFor } from "@self/tootils/render";
+import {
+	cleanup,
+	render,
+	fireEvent,
+	waitFor,
+	upload_file,
+	mock_client,
+	TEST_JPG
+} from "@self/tootils/render";
 import { run_shared_prop_tests } from "@self/tootils/shared-prop-tests";
 
 import Gallery from "./Index.svelte";
@@ -376,6 +384,84 @@ describe("Props: buttons", () => {
 		expect(getByRole("button", { name: "common.download" })).toBeVisible();
 	});
 
+	test("buttons=['download_all'] downloads gallery files as a zip from grid view", async () => {
+		const fetch = vi.fn(async () => new Response(new Blob(["file"])));
+		const blobs: Blob[] = [];
+		const clicked_names: string[] = [];
+		const create_object_url = vi
+			.spyOn(URL, "createObjectURL")
+			.mockImplementation((object: Blob | MediaSource) => {
+				blobs.push(object as Blob);
+				return "blob:gallery";
+			});
+		const revoke_object_url = vi
+			.spyOn(URL, "revokeObjectURL")
+			.mockImplementation(() => {});
+		const click = vi
+			.spyOn(HTMLAnchorElement.prototype, "click")
+			.mockImplementation(function (this: HTMLAnchorElement) {
+				clicked_names.push(this.download);
+			});
+
+		try {
+			const value = [img("cat"), vid("clip"), img("dog")];
+			const { queryByRole } = await render(Gallery, {
+				...preview_props,
+				value,
+				buttons: ["download_all"],
+				client: { fetch }
+			});
+
+			expect(
+				queryByRole("button", { name: "common.download_all" })
+			).not.toBeInTheDocument();
+
+			cleanup();
+
+			const { getByRole } = await render(Gallery, {
+				...default_props,
+				value,
+				buttons: ["download_all"],
+				client: { fetch }
+			});
+
+			await fireEvent.click(
+				getByRole("button", { name: "common.download_all" })
+			);
+
+			await waitFor(() => {
+				expect(fetch).toHaveBeenCalledTimes(3);
+				expect(click).toHaveBeenCalledTimes(1);
+			});
+
+			expect(fetch).toHaveBeenNthCalledWith(1, "https://example.com/cat.png");
+			expect(fetch).toHaveBeenNthCalledWith(2, "https://example.com/clip.mp4");
+			expect(fetch).toHaveBeenNthCalledWith(3, "https://example.com/dog.png");
+			expect(create_object_url).toHaveBeenCalledTimes(1);
+			expect(revoke_object_url).toHaveBeenCalledWith("blob:gallery");
+			expect(clicked_names).toEqual(["gallery.zip"]);
+			expect(blobs[0].type).toBe("application/zip");
+
+			const zip = new Uint8Array(await blobs[0].arrayBuffer());
+			expect(Array.from(zip.slice(0, 4))).toEqual([0x50, 0x4b, 0x03, 0x04]);
+			const zip_view = new DataView(zip.buffer);
+			expect(zip_view.getUint16(6, true)).toBe(0x0800);
+			const central_header_index = zip.findIndex((_, index) =>
+				[0x50, 0x4b, 0x01, 0x02].every(
+					(byte, offset) => zip[index + offset] === byte
+				)
+			);
+			expect(central_header_index).toBeGreaterThan(-1);
+			expect(zip_view.getUint16(central_header_index + 8, true)).toBe(0x0800);
+			const zip_text = new TextDecoder().decode(zip);
+			expect(zip_text).toContain("cat.png");
+			expect(zip_text).toContain("clip.mp4");
+			expect(zip_text).toContain("dog.png");
+		} finally {
+			vi.restoreAllMocks();
+		}
+	});
+
 	test("buttons=['fullscreen'] shows fullscreen button in preview", async () => {
 		const { getByLabelText } = await render(Gallery, {
 			...preview_props,
@@ -610,6 +696,30 @@ describe("Events: change", () => {
 	});
 });
 
+describe("Events: upload", () => {
+	afterEach(() => cleanup());
+
+	test("upload: file input dispatches upload and change events", async () => {
+		const { listen } = await render(Gallery, {
+			...default_props,
+			interactive: true,
+			value: null,
+			root: "https://example.com",
+			client: mock_client()
+		});
+
+		const upload = listen("upload");
+		const change = listen("change");
+
+		await upload_file(TEST_JPG);
+
+		await waitFor(() => {
+			expect(upload).toHaveBeenCalledTimes(1);
+		});
+		expect(change).toHaveBeenCalledTimes(1);
+	});
+});
+
 describe("Events: select", () => {
 	afterEach(() => cleanup());
 

package/Index.svelte

@@ -205,10 +205,10 @@
 			<Webcam
 				root={gradio.shared.root}
 				value={null}
-				on:capture={async (e) => {
-					if (!(e.detail instanceof Blob)) return;
+				oncapture={async (detail) => {
+					if (!(detail instanceof Blob)) return;
 					const f = await handle_save(
-						e.detail,
+						detail,
 						(f) => gradio.shared.client.upload(f, gradio.shared.root),
 						"webcam_upload"
 					);
@@ -217,9 +217,6 @@
 					active_source = null;
 					gradio.dispatch("change", gradio.props.value);
 				}}
-				on:error
-				on:drag
-				on:close_stream
 				mirror_webcam={true}
 				streaming={false}
 				mode="image"
@@ -231,18 +228,15 @@
 			<Webcam
 				root={gradio.shared.root}
 				value={null}
-				on:capture={async (e) => {
-					if (!e.detail) return;
-					const f = { ...(e.detail as FileData) };
+				oncapture={async (detail) => {
+					if (!detail) return;
+					const f = { ...(detail as FileData) };
 					f.mime_type = "video/webm";
 					const processed_files = await process_upload_files([f]);
 					gradio.props.value?.push(...processed_files);
 					active_source = null;
 					gradio.dispatch("change", gradio.props.value);
 				}}
-				on:error
-				on:drag
-				on:close_stream
 				mirror_webcam={true}
 				streaming={false}
 				mode="video"
@@ -302,6 +296,9 @@
 			show_download_button={gradio.props.buttons.some(
 				(btn) => typeof btn === "string" && btn === "download"
 			)}
+			show_download_all_button={gradio.props.buttons.some(
+				(btn) => typeof btn === "string" && btn === "download_all"
+			)}
 			fit_columns={gradio.props.fit_columns}
 			i18n={gradio.i18n}
 			_fetch={(...args) => gradio.shared.client.fetch(...args)}

package/dist/Index.svelte

@@ -205,10 +205,10 @@
 			<Webcam
 				root={gradio.shared.root}
 				value={null}
-				on:capture={async (e) => {
-					if (!(e.detail instanceof Blob)) return;
+				oncapture={async (detail) => {
+					if (!(detail instanceof Blob)) return;
 					const f = await handle_save(
-						e.detail,
+						detail,
 						(f) => gradio.shared.client.upload(f, gradio.shared.root),
 						"webcam_upload"
 					);
@@ -217,9 +217,6 @@
 					active_source = null;
 					gradio.dispatch("change", gradio.props.value);
 				}}
-				on:error
-				on:drag
-				on:close_stream
 				mirror_webcam={true}
 				streaming={false}
 				mode="image"
@@ -231,18 +228,15 @@
 			<Webcam
 				root={gradio.shared.root}
 				value={null}
-				on:capture={async (e) => {
-					if (!e.detail) return;
-					const f = { ...(e.detail as FileData) };
+				oncapture={async (detail) => {
+					if (!detail) return;
+					const f = { ...(detail as FileData) };
 					f.mime_type = "video/webm";
 					const processed_files = await process_upload_files([f]);
 					gradio.props.value?.push(...processed_files);
 					active_source = null;
 					gradio.dispatch("change", gradio.props.value);
 				}}
-				on:error
-				on:drag
-				on:close_stream
 				mirror_webcam={true}
 				streaming={false}
 				mode="video"
@@ -302,6 +296,9 @@
 			show_download_button={gradio.props.buttons.some(
 				(btn) => typeof btn === "string" && btn === "download"
 			)}
+			show_download_all_button={gradio.props.buttons.some(
+				(btn) => typeof btn === "string" && btn === "download_all"
+			)}
 			fit_columns={gradio.props.fit_columns}
 			i18n={gradio.i18n}
 			_fetch={(...args) => gradio.shared.client.fetch(...args)}

package/dist/Index.svelte.d.ts

@@ -1,24 +1,5 @@
 export { default as BaseGallery } from "./shared/Gallery.svelte";
 export { default as BaseExample } from "./Example.svelte";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Index: $$__sveltets_2_IsomorphicComponent<$$ComponentProps, {
-    error: CustomEvent<string>;
-    drag: CustomEvent<any>;
-    close_stream: CustomEvent<undefined>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Index = InstanceType<typeof Index>;
+declare const Index: import("svelte").Component<$$ComponentProps, {}, "">;
+type Index = ReturnType<typeof Index>;
 export default Index;

package/dist/shared/Gallery.svelte

@@ -18,6 +18,7 @@
 
 	import {
 		Download,
+		DownloadAll,
 		Image as ImageIcon,
 		Clear,
 		Play,
@@ -45,6 +46,7 @@
 		object_fit = "cover",
 		show_share_button = false,
 		show_download_button = false,
+		show_download_all_button = false,
 		i18n,
 		selected_index = $bindable(),
 		interactive,
@@ -83,6 +85,7 @@
 		object_fit: "contain" | "cover" | "fill" | "none" | "scale-down";
 		show_share_button: boolean;
 		show_download_button: boolean;
+		show_download_all_button: boolean;
 		i18n: I18nFormatter;
 		selected_index: number | null;
 		interactive: boolean;
@@ -307,6 +310,184 @@
 		URL.revokeObjectURL(url);
 	}
 
+	const crc_table = new Uint32Array(
+		Array.from({ length: 256 }, (_, i) => {
+			let c = i;
+			for (let k = 0; k < 8; k++) {
+				c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+			}
+			return c >>> 0;
+		})
+	);
+
+	function crc32(data: Uint8Array): number {
+		let c = 0xffffffff;
+		for (const byte of data) {
+			c = crc_table[(c ^ byte) & 0xff] ^ (c >>> 8);
+		}
+		return (c ^ 0xffffffff) >>> 0;
+	}
+
+	function write_uint16(view: DataView, offset: number, value: number): void {
+		view.setUint16(offset, value, true);
+	}
+
+	function write_uint32(view: DataView, offset: number, value: number): void {
+		view.setUint32(offset, value, true);
+	}
+
+	function zip_header(size: number): Uint8Array {
+		return new Uint8Array(size);
+	}
+
+	function get_unique_name(
+		file: FileData,
+		fallback: string,
+		used_names: Map<string, number>
+	): string {
+		const raw_name = file.orig_name || file.path || fallback;
+		const name = raw_name.split(/[/\\]/).pop() || fallback;
+		const count = used_names.get(name) ?? 0;
+		used_names.set(name, count + 1);
+		if (count === 0) return name;
+
+		const dot_index = name.lastIndexOf(".");
+		const base = dot_index > 0 ? name.slice(0, dot_index) : name;
+		const ext = dot_index > 0 ? name.slice(dot_index) : "";
+		return `${base}-${count + 1}${ext}`;
+	}
+
+	function create_zip(files: { name: string; data: Uint8Array }[]): Uint8Array {
+		const encoder = new TextEncoder();
+		const parts: Uint8Array[] = [];
+		const central_parts: Uint8Array[] = [];
+		const utf8_flag = 0x0800;
+		let offset = 0;
+
+		for (const file of files) {
+			const name = encoder.encode(file.name);
+			const checksum = crc32(file.data);
+			const local_header = zip_header(30 + name.length);
+			const local_view = new DataView(local_header.buffer);
+			write_uint32(local_view, 0, 0x04034b50);
+			write_uint16(local_view, 4, 20);
+			write_uint16(local_view, 6, utf8_flag);
+			write_uint16(local_view, 8, 0);
+			write_uint16(local_view, 10, 0);
+			write_uint16(local_view, 12, 33);
+			write_uint32(local_view, 14, checksum);
+			write_uint32(local_view, 18, file.data.length);
+			write_uint32(local_view, 22, file.data.length);
+			write_uint16(local_view, 26, name.length);
+			write_uint16(local_view, 28, 0);
+			local_header.set(name, 30);
+			parts.push(local_header, file.data);
+
+			const central_header = zip_header(46 + name.length);
+			const central_view = new DataView(central_header.buffer);
+			write_uint32(central_view, 0, 0x02014b50);
+			write_uint16(central_view, 4, 20);
+			write_uint16(central_view, 6, 20);
+			write_uint16(central_view, 8, utf8_flag);
+			write_uint16(central_view, 10, 0);
+			write_uint16(central_view, 12, 0);
+			write_uint16(central_view, 14, 33);
+			write_uint32(central_view, 16, checksum);
+			write_uint32(central_view, 20, file.data.length);
+			write_uint32(central_view, 24, file.data.length);
+			write_uint16(central_view, 28, name.length);
+			write_uint16(central_view, 30, 0);
+			write_uint16(central_view, 32, 0);
+			write_uint16(central_view, 34, 0);
+			write_uint16(central_view, 36, 0);
+			write_uint32(central_view, 38, 0);
+			write_uint32(central_view, 42, offset);
+			central_header.set(name, 46);
+			central_parts.push(central_header);
+
+			offset += local_header.length + file.data.length;
+		}
+
+		const central_offset = offset;
+		const central_size = central_parts.reduce(
+			(sum, part) => sum + part.length,
+			0
+		);
+		const end = zip_header(22);
+		const end_view = new DataView(end.buffer);
+		write_uint32(end_view, 0, 0x06054b50);
+		write_uint16(end_view, 4, 0);
+		write_uint16(end_view, 6, 0);
+		write_uint16(end_view, 8, files.length);
+		write_uint16(end_view, 10, files.length);
+		write_uint32(end_view, 12, central_size);
+		write_uint32(end_view, 16, central_offset);
+		write_uint16(end_view, 20, 0);
+
+		const zip = new Uint8Array(central_offset + central_size + end.length);
+		let cursor = 0;
+		for (const part of [...parts, ...central_parts, end]) {
+			zip.set(part, cursor);
+			cursor += part.length;
+		}
+		return zip;
+	}
+
+	async function get_zip_file(
+		url: string,
+		name: string
+	): Promise<{ name: string; data: Uint8Array } | null> {
+		let response;
+		try {
+			response = await _fetch(url);
+		} catch (error) {
+			if (error instanceof TypeError) {
+				window.open(url, "_blank", "noreferrer");
+			}
+			return null;
+		}
+		if (!response.ok) return null;
+		return {
+			name,
+			data: new Uint8Array(await response.arrayBuffer())
+		};
+	}
+
+	async function download_all(media: GalleryData[]): Promise<void> {
+		const used_names = new Map<string, number>();
+		const files = await Promise.all(
+			media.flatMap((item, index) => {
+				const file = "image" in item ? item.image : item.video;
+				const fallback =
+					"image" in item ? `image-${index + 1}` : `video-${index + 1}`;
+				if (!file.url) return [];
+				const name = get_unique_name(file, fallback, used_names);
+				return [get_zip_file(file.url, name)];
+			})
+		);
+		const valid_files = files.filter(
+			(file): file is { name: string; data: Uint8Array } => file !== null
+		);
+
+		if (valid_files.length === 0) return;
+
+		const zip = create_zip(valid_files);
+		const url = URL.createObjectURL(
+			new Blob([zip.buffer as ArrayBuffer], { type: "application/zip" })
+		);
+		const link = document.createElement("a");
+		link.href = url;
+		link.download = "gallery.zip";
+		link.click();
+		URL.revokeObjectURL(url);
+	}
+
+	function handle_download_all(): void {
+		if (resolved_value) {
+			download_all(resolved_value);
+		}
+	}
+
 	let selected_media = $derived.by(() =>
 		selected_index != null && resolved_value != null
 			? resolved_value[selected_index]
@@ -418,11 +599,11 @@
 						<div class="icon-button">
 							<ShareButton
 								{i18n}
-								on:share={(detail) => {
-									onshare(detail);
+								onshare={(detail) => {
+									onshare({ detail } as CustomEvent);
 								}}
-								on:error={(detail) => {
-									onerror(detail);
+								onerror={(detail) => {
+									onerror({ detail } as CustomEvent);
 								}}
 								value={resolved_value}
 								formatter={format_gallery_for_sharing}
@@ -550,6 +731,13 @@
 						onclear();
 					}}
 				>
+					{#if show_download_all_button}
+						<IconButton
+							Icon={DownloadAll}
+							label={i18n("common.download_all")}
+							onclick={handle_download_all}
+						/>
+					{/if}
 					{#if upload && stream_handler}
 						<IconButton
 							Icon={UploadIcon}
@@ -598,6 +786,14 @@
 						/>
 					{/if}
 				</ModifyUpload>
+			{:else if show_download_all_button && !(selected_media && allow_preview)}
+				<IconButtonWrapper>
+					<IconButton
+						Icon={DownloadAll}
+						label={i18n("common.download_all")}
+						onclick={handle_download_all}
+					/>
+				</IconButtonWrapper>
 			{/if}
 			<div
 				class="grid-container"

package/dist/shared/Gallery.svelte.d.ts

@@ -16,6 +16,7 @@ type $$ComponentProps = {
     object_fit: "contain" | "cover" | "fill" | "none" | "scale-down";
     show_share_button: boolean;
     show_download_button: boolean;
+    show_download_all_button: boolean;
     i18n: I18nFormatter;
     selected_index: number | null;
     interactive: boolean;

package/dist/types.d.ts

@@ -19,7 +19,7 @@ export interface GalleryProps {
     allow_preview: boolean;
     selected_index: number | null;
     object_fit: "contain" | "cover" | "fill" | "none" | "scale-down";
-    buttons: (string | CustomButton)[];
+    buttons: ("share" | "download" | "download_all" | "fullscreen" | CustomButton)[];
     type: "numpy" | "pil" | "filepath";
     fit_columns: boolean;
     sources: ("upload" | "webcam-video" | "webcam" | "clipboard")[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/gallery",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -8,15 +8,15 @@
   "private": false,
   "dependencies": {
     "dequal": "^2.0.3",
-    "@gradio/atoms": "^0.25.0",
-    "@gradio/file": "^0.15.0",
-    "@gradio/icons": "^0.15.1",
-    "@gradio/client": "^2.3.0",
-    "@gradio/image": "^0.27.0",
-    "@gradio/statustracker": "^0.15.0",
+    "@gradio/atoms": "^0.26.0",
+    "@gradio/client": "^2.3.1",
+    "@gradio/file": "^0.15.1",
+    "@gradio/icons": "^0.16.0",
+    "@gradio/image": "^0.28.0",
+    "@gradio/statustracker": "^0.15.1",
+    "@gradio/upload": "^0.18.1",
     "@gradio/utils": "^0.13.0",
-    "@gradio/upload": "^0.18.0",
-    "@gradio/video": "^0.21.0"
+    "@gradio/video": "^0.22.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.16.2"

package/shared/Gallery.svelte

@@ -18,6 +18,7 @@
 
 	import {
 		Download,
+		DownloadAll,
 		Image as ImageIcon,
 		Clear,
 		Play,
@@ -45,6 +46,7 @@
 		object_fit = "cover",
 		show_share_button = false,
 		show_download_button = false,
+		show_download_all_button = false,
 		i18n,
 		selected_index = $bindable(),
 		interactive,
@@ -83,6 +85,7 @@
 		object_fit: "contain" | "cover" | "fill" | "none" | "scale-down";
 		show_share_button: boolean;
 		show_download_button: boolean;
+		show_download_all_button: boolean;
 		i18n: I18nFormatter;
 		selected_index: number | null;
 		interactive: boolean;
@@ -307,6 +310,184 @@
 		URL.revokeObjectURL(url);
 	}
 
+	const crc_table = new Uint32Array(
+		Array.from({ length: 256 }, (_, i) => {
+			let c = i;
+			for (let k = 0; k < 8; k++) {
+				c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+			}
+			return c >>> 0;
+		})
+	);
+
+	function crc32(data: Uint8Array): number {
+		let c = 0xffffffff;
+		for (const byte of data) {
+			c = crc_table[(c ^ byte) & 0xff] ^ (c >>> 8);
+		}
+		return (c ^ 0xffffffff) >>> 0;
+	}
+
+	function write_uint16(view: DataView, offset: number, value: number): void {
+		view.setUint16(offset, value, true);
+	}
+
+	function write_uint32(view: DataView, offset: number, value: number): void {
+		view.setUint32(offset, value, true);
+	}
+
+	function zip_header(size: number): Uint8Array {
+		return new Uint8Array(size);
+	}
+
+	function get_unique_name(
+		file: FileData,
+		fallback: string,
+		used_names: Map<string, number>
+	): string {
+		const raw_name = file.orig_name || file.path || fallback;
+		const name = raw_name.split(/[/\\]/).pop() || fallback;
+		const count = used_names.get(name) ?? 0;
+		used_names.set(name, count + 1);
+		if (count === 0) return name;
+
+		const dot_index = name.lastIndexOf(".");
+		const base = dot_index > 0 ? name.slice(0, dot_index) : name;
+		const ext = dot_index > 0 ? name.slice(dot_index) : "";
+		return `${base}-${count + 1}${ext}`;
+	}
+
+	function create_zip(files: { name: string; data: Uint8Array }[]): Uint8Array {
+		const encoder = new TextEncoder();
+		const parts: Uint8Array[] = [];
+		const central_parts: Uint8Array[] = [];
+		const utf8_flag = 0x0800;
+		let offset = 0;
+
+		for (const file of files) {
+			const name = encoder.encode(file.name);
+			const checksum = crc32(file.data);
+			const local_header = zip_header(30 + name.length);
+			const local_view = new DataView(local_header.buffer);
+			write_uint32(local_view, 0, 0x04034b50);
+			write_uint16(local_view, 4, 20);
+			write_uint16(local_view, 6, utf8_flag);
+			write_uint16(local_view, 8, 0);
+			write_uint16(local_view, 10, 0);
+			write_uint16(local_view, 12, 33);
+			write_uint32(local_view, 14, checksum);
+			write_uint32(local_view, 18, file.data.length);
+			write_uint32(local_view, 22, file.data.length);
+			write_uint16(local_view, 26, name.length);
+			write_uint16(local_view, 28, 0);
+			local_header.set(name, 30);
+			parts.push(local_header, file.data);
+
+			const central_header = zip_header(46 + name.length);
+			const central_view = new DataView(central_header.buffer);
+			write_uint32(central_view, 0, 0x02014b50);
+			write_uint16(central_view, 4, 20);
+			write_uint16(central_view, 6, 20);
+			write_uint16(central_view, 8, utf8_flag);
+			write_uint16(central_view, 10, 0);
+			write_uint16(central_view, 12, 0);
+			write_uint16(central_view, 14, 33);
+			write_uint32(central_view, 16, checksum);
+			write_uint32(central_view, 20, file.data.length);
+			write_uint32(central_view, 24, file.data.length);
+			write_uint16(central_view, 28, name.length);
+			write_uint16(central_view, 30, 0);
+			write_uint16(central_view, 32, 0);
+			write_uint16(central_view, 34, 0);
+			write_uint16(central_view, 36, 0);
+			write_uint32(central_view, 38, 0);
+			write_uint32(central_view, 42, offset);
+			central_header.set(name, 46);
+			central_parts.push(central_header);
+
+			offset += local_header.length + file.data.length;
+		}
+
+		const central_offset = offset;
+		const central_size = central_parts.reduce(
+			(sum, part) => sum + part.length,
+			0
+		);
+		const end = zip_header(22);
+		const end_view = new DataView(end.buffer);
+		write_uint32(end_view, 0, 0x06054b50);
+		write_uint16(end_view, 4, 0);
+		write_uint16(end_view, 6, 0);
+		write_uint16(end_view, 8, files.length);
+		write_uint16(end_view, 10, files.length);
+		write_uint32(end_view, 12, central_size);
+		write_uint32(end_view, 16, central_offset);
+		write_uint16(end_view, 20, 0);
+
+		const zip = new Uint8Array(central_offset + central_size + end.length);
+		let cursor = 0;
+		for (const part of [...parts, ...central_parts, end]) {
+			zip.set(part, cursor);
+			cursor += part.length;
+		}
+		return zip;
+	}
+
+	async function get_zip_file(
+		url: string,
+		name: string
+	): Promise<{ name: string; data: Uint8Array } | null> {
+		let response;
+		try {
+			response = await _fetch(url);
+		} catch (error) {
+			if (error instanceof TypeError) {
+				window.open(url, "_blank", "noreferrer");
+			}
+			return null;
+		}
+		if (!response.ok) return null;
+		return {
+			name,
+			data: new Uint8Array(await response.arrayBuffer())
+		};
+	}
+
+	async function download_all(media: GalleryData[]): Promise<void> {
+		const used_names = new Map<string, number>();
+		const files = await Promise.all(
+			media.flatMap((item, index) => {
+				const file = "image" in item ? item.image : item.video;
+				const fallback =
+					"image" in item ? `image-${index + 1}` : `video-${index + 1}`;
+				if (!file.url) return [];
+				const name = get_unique_name(file, fallback, used_names);
+				return [get_zip_file(file.url, name)];
+			})
+		);
+		const valid_files = files.filter(
+			(file): file is { name: string; data: Uint8Array } => file !== null
+		);
+
+		if (valid_files.length === 0) return;
+
+		const zip = create_zip(valid_files);
+		const url = URL.createObjectURL(
+			new Blob([zip.buffer as ArrayBuffer], { type: "application/zip" })
+		);
+		const link = document.createElement("a");
+		link.href = url;
+		link.download = "gallery.zip";
+		link.click();
+		URL.revokeObjectURL(url);
+	}
+
+	function handle_download_all(): void {
+		if (resolved_value) {
+			download_all(resolved_value);
+		}
+	}
+
 	let selected_media = $derived.by(() =>
 		selected_index != null && resolved_value != null
 			? resolved_value[selected_index]
@@ -418,11 +599,11 @@
 						<div class="icon-button">
 							<ShareButton
 								{i18n}
-								on:share={(detail) => {
-									onshare(detail);
+								onshare={(detail) => {
+									onshare({ detail } as CustomEvent);
 								}}
-								on:error={(detail) => {
-									onerror(detail);
+								onerror={(detail) => {
+									onerror({ detail } as CustomEvent);
 								}}
 								value={resolved_value}
 								formatter={format_gallery_for_sharing}
@@ -550,6 +731,13 @@
 						onclear();
 					}}
 				>
+					{#if show_download_all_button}
+						<IconButton
+							Icon={DownloadAll}
+							label={i18n("common.download_all")}
+							onclick={handle_download_all}
+						/>
+					{/if}
 					{#if upload && stream_handler}
 						<IconButton
 							Icon={UploadIcon}
@@ -598,6 +786,14 @@
 						/>
 					{/if}
 				</ModifyUpload>
+			{:else if show_download_all_button && !(selected_media && allow_preview)}
+				<IconButtonWrapper>
+					<IconButton
+						Icon={DownloadAll}
+						label={i18n("common.download_all")}
+						onclick={handle_download_all}
+					/>
+				</IconButtonWrapper>
 			{/if}
 			<div
 				class="grid-container"

package/types.ts

@@ -23,7 +23,13 @@ export interface GalleryProps {
 	allow_preview: boolean;
 	selected_index: number | null;
 	object_fit: "contain" | "cover" | "fill" | "none" | "scale-down";
-	buttons: (string | CustomButton)[];
+	buttons: (
+		| "share"
+		| "download"
+		| "download_all"
+		| "fullscreen"
+		| CustomButton
+	)[];
 	type: "numpy" | "pil" | "filepath";
 	fit_columns: boolean;
 	sources: ("upload" | "webcam-video" | "webcam" | "clipboard")[];