Feat: make UploadButton accept icon (#6584)

* feat: make UploadButton accept icon

* add changeset

* add proxy url prop

* add stories

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/tangy-pots-speak.md

@@ -0,0 +1,6 @@
+---
+"@gradio/uploadbutton": minor
+"gradio": minor
+---
+
+feat:Feat: make UploadButton accept icon

gradio/components/upload_button.py

@@ -48,6 +48,7 @@ class UploadButton(Component):
         variant: Literal["primary", "secondary", "stop"] = "secondary",
         visible: bool = True,
         size: Literal["sm", "lg"] | None = None,
+        icon: str | None = None,
         scale: int | None = None,
         min_width: int | None = None,
         interactive: bool = True,
@@ -114,6 +115,7 @@ class UploadButton(Component):
             min_width=min_width,
             interactive=interactive,
         )
+        self.icon = self.move_resource_to_block_cache(icon)
 
     def api_info(self) -> dict[str, list[str]]:
         if self.file_count == "single":

js/uploadbutton/Index.svelte

@@ -17,6 +17,7 @@
 	export let root: string;
 	export let size: "sm" | "lg" = "lg";
 	export let scale: number | null = null;
+	export let icon: string | null = null;
 	export let min_width: number | undefined = undefined;
 	export let variant: "primary" | "secondary" | "stop" = "secondary";
 	export let gradio: Gradio<{
@@ -25,6 +26,7 @@
 		click: never;
 	}>;
 	export let interactive: boolean;
+	export let proxy_url: null | string = null;
 
 	$: disabled = !interactive;
 
@@ -45,12 +47,14 @@
 	{file_types}
 	{size}
 	{scale}
+	{icon}
 	{min_width}
 	{root}
 	{value}
 	{disabled}
 	{variant}
 	{label}
+	{proxy_url}
 	on:click={() => gradio.dispatch("click")}
 	on:change={({ detail }) => handle_event(detail, "change")}
 	on:upload={({ detail }) => handle_event(detail, "upload")}

js/uploadbutton/UploadButton.stories.svelte

@@ -0,0 +1,80 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import UploadButton from "./Index.svelte";
+</script>
+
+<Meta
+	title="Components/UploadButton"
+	component={UploadButton}
+	argTypes={{
+		label: {
+			control: "text",
+			description: "The text to display on the button",
+			name: "label",
+			value: "Gradio Button"
+		},
+		variant: {
+			options: ["primary", "secondary", "stop"],
+			description: "The variant of the button",
+			control: { type: "select" },
+			defaultValue: "primary"
+		},
+		size: {
+			options: ["sm", "lg"],
+			description: "The size of the button",
+			control: { type: "select" },
+			defaultValue: "lg"
+		},
+		visible: {
+			options: [true, false],
+			description: "Sets the visibility of the button",
+			control: { type: "boolean" },
+			defaultValue: true
+		},
+		interactive: {
+			options: [true, false],
+			description: "If false, the button will be in a disabled state",
+			control: { type: "boolean" },
+			defaultValue: true
+		},
+		disabled: {
+			options: [true, false],
+			control: { type: "boolean" },
+			defaultValue: false
+		},
+		scale: {
+			options: [null, 0.5, 1, 2],
+			description:
+				"relative width compared to adjacent Components in a Row. For example, if Component A has scale=2, and Component B has scale=1, A will be twice as wide as B. Should be an integer.",
+			control: { type: "select" }
+		}
+	}}
+/>
+
+<Template let:args>
+	<UploadButton value="Gradio Button" {...args} />
+</Template>
+
+<Story
+	name="Primary"
+	args={{ label: "Upload", variant: "primary", size: "lg", scale: 1 }}
+/>
+<Story
+	name="Secondary"
+	args={{ label: "Upload", variant: "secondary", size: "lg" }}
+/>
+<Story name="Stop" args={{ label: "Upload", variant: "stop", size: "lg" }} />
+<Story
+	name="Button with external image icon"
+	args={{
+		label: "Upload",
+		icon: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
+	}}
+/>
+<Story
+	name="Button with visible equal to false"
+	args={{
+		label: "Upload",
+		visible: false
+	}}
+/>

js/uploadbutton/shared/UploadButton.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
 	import { tick, createEventDispatcher } from "svelte";
 	import { BaseButton } from "@gradio/button";
-	import { upload, prepare_files, type FileData } from "@gradio/client";
+	import {
+		upload,
+		prepare_files,
+		type FileData,
+		get_fetchable_url_or_file
+	} from "@gradio/client";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
@@ -12,10 +17,13 @@
 	export let file_types: string[] = [];
 	export let root: string;
 	export let size: "sm" | "lg" = "lg";
+	export let icon: string | null = null;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let variant: "primary" | "secondary" | "stop" = "secondary";
 	export let disabled = false;
+	export let proxy_url: string | null = null;
+	$: icon_path = get_fetchable_url_or_file(icon, root, proxy_url);
 
 	const dispatch = createEventDispatcher();
 
@@ -95,6 +103,9 @@
 	{min_width}
 	{disabled}
 >
+	{#if icon}
+		<img class="button-icon" src={icon_path} alt={`${value} icon`} />
+	{/if}
 	<slot />
 </BaseButton>
 
@@ -102,4 +113,9 @@
 	.hide {
 		display: none;
 	}
+	.button-icon {
+		width: var(--text-xl);
+		height: var(--text-xl);
+		margin-right: var(--spacing-xl);
+	}
 </style>