immich/web/src/lib/components/shared-components/upload-asset-preview.svelte

<script lang="ts">
	import { fade } from 'svelte/transition';
	import { asByteUnitString } from '$lib/utils/byte-units';
	import { UploadAsset } from '$lib/models/upload-asset';

	export let uploadAsset: UploadAsset;

	let showFallbackImage = false;
	const previewURL = URL.createObjectURL(uploadAsset.file);
</script>

<div
	in:fade={{ duration: 250 }}
	out:fade={{ duration: 100 }}
	class="text-xs mt-3 rounded-lg bg-immich-bg grid grid-cols-[70px_auto] gap-2 h-[70px]"
>
	<div class="relative">
		{#if showFallbackImage}
			<img
				in:fade={{ duration: 250 }}
				src="immich-logo.svg"
				alt="Immich Logo"
				class="h-[70px] w-[70px] object-cover rounded-tl-lg rounded-bl-lg"
				draggable="false"
			/>
		{:else}
			<img
				in:fade={{ duration: 250 }}
				on:load={() => {
					URL.revokeObjectURL(previewURL);
				}}
				on:error={() => {
					URL.revokeObjectURL(previewURL);
					showFallbackImage = true;
				}}
				src={previewURL}
				alt="Preview of asset"
				class="h-[70px] w-[70px] object-cover rounded-tl-lg rounded-bl-lg"
				draggable="false"
			/>
		{/if}

		<div class="bottom-0 left-0 absolute w-full h-[25px] bg-immich-primary/30">
			<p
				class="absolute bottom-1 right-1 object-right-bottom text-gray-50/95 font-semibold stroke-immich-primary uppercase"
			>
				.{uploadAsset.fileExtension}
			</p>
		</div>
	</div>

	<div class="p-2 pr-4 flex flex-col justify-between">
		<input
			disabled
			class="bg-gray-100 border w-full p-1 rounded-md text-[10px] px-2"
			value={`[${asByteUnitString(uploadAsset.file.size)}] ${uploadAsset.file.name}`}
		/>

		<div class="w-full bg-gray-300 h-[15px] rounded-md mt-[5px] text-white relative">
			<div
				class="bg-immich-primary h-[15px] rounded-md transition-all"
				style={`width: ${uploadAsset.progress}%`}
			/>
			<p class="absolute h-full w-full text-center top-0 text-[10px] ">
				{uploadAsset.progress}/100
			</p>
		</div>
	</div>
</div>