js/atoms/src/UploadText.svelte

<script lang="ts">
	import type { I18nFormatter } from "@gradio/utils";
	import { Upload as UploadIcon, ImagePaste } from "@gradio/icons";
	import { inject } from "./utils/parse_placeholder";

	export let type:
		| "video"
		| "image"
		| "audio"
		| "file"
		| "csv"
		| "clipboard"
		| "gallery" = "file";
	export let i18n: I18nFormatter;
	export let message: string | undefined = undefined;
	export let mode: "full" | "short" = "full";
	export let hovered = false;
	export let placeholder: string | undefined = undefined;

	const defs = {
		image: "upload_text.drop_image",
		video: "upload_text.drop_video",
		audio: "upload_text.drop_audio",
		file: "upload_text.drop_file",
		csv: "upload_text.drop_csv",
		gallery: "upload_text.drop_gallery",
		clipboard: "upload_text.paste_clipboard"
	};

	$: [heading, paragraph] = placeholder ? inject(placeholder) : [false, false];
</script>

<div class="wrap">
	<span class="icon-wrap" class:hovered>
		{#if type === "clipboard"}
			<ImagePaste />
		{:else}
			<UploadIcon />
		{/if}
	</span>

	{#if heading || paragraph}
		{#if heading}
			<h2>{heading}</h2>
		{/if}
		{#if paragraph}
			<p>{paragraph}</p>
		{/if}
	{:else}
		{i18n(defs[type] || defs.file)}

		{#if mode !== "short"}
			<span class="or">- {i18n("common.or")} -</span>
			{message || i18n("upload_text.click_to_upload")}
		{/if}
	{/if}
</div>

<style>
	h2 {
		font-size: var(--text-xl) !important;
	}

	p,
	h2 {
		white-space: pre-line;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		min-height: var(--size-60);
		color: var(--block-label-text-color);
		line-height: var(--line-md);
		height: 100%;
		padding-top: var(--size-3);
		text-align: center;
		margin: auto var(--spacing-lg);
	}

	.or {
		color: var(--body-text-color-subdued);
		display: flex;
	}

	.icon-wrap {
		width: 30px;
		margin-bottom: var(--spacing-lg);
	}

	@media (--screen-md) {
		.wrap {
			font-size: var(--text-lg);
		}
	}

	.hovered {
		color: var(--color-accent);
	}
</style>