You've already forked immich
mirror of
https://github.com/immich-app/immich.git
synced 2025-06-27 05:11:11 +02:00
feat(web): Improved assets upload (#3850)
* Improved asset upload algorithm. - Upload Queue: New process algorithm - Upload Queue: Concurrency correctly respected when dragging / adding multiple group of files to the queue - Upload Task: Add more information about progress (upload speed and remaining time) - Upload Panel: Add more information to about the queue status (Remaining, Errors, Duplicated, Uploaded) - Error recovery: asset information are kept in the queue to give the user a chance to read the error message - Error recovery: on error allow the user to retry the upload or hide the error / all errors * Support "live" editing of the upload concurrency * Fixed some issues * Reformat * fix: merge, linting, dark mode, upload to share --------- Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
Villena Guillaume
committed by
GitHub
GitHub
parent
a26ed3d1a6
commit
ca35e5557b
@ -1,65 +1,128 @@
|
||||
<script lang="ts">
|
||||
import type { UploadAsset } from '$lib/models/upload-asset';
|
||||
import { UploadState } from '$lib/models/upload-asset';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { asByteUnitString } from '$lib/utils/byte-units';
|
||||
import { fade } from 'svelte/transition';
|
||||
import ImmichLogo from './immich-logo.svelte';
|
||||
import { getFilenameExtension } from '../../utils/asset-utils';
|
||||
import { getFilenameExtension } from '$lib/utils/asset-utils';
|
||||
import { uploadAssetsStore } from '$lib/stores/upload';
|
||||
import Cancel from 'svelte-material-icons/Cancel.svelte';
|
||||
import Refresh from 'svelte-material-icons/Refresh.svelte';
|
||||
import { fileUploadHandler } from '$lib/utils/file-uploader';
|
||||
|
||||
export let uploadAsset: UploadAsset;
|
||||
|
||||
let showFallbackImage = false;
|
||||
let showFallbackImage = uploadAsset.state === UploadState.PENDING;
|
||||
const previewURL = URL.createObjectURL(uploadAsset.file);
|
||||
|
||||
const handleRetry = (uploadAsset: UploadAsset) => {
|
||||
uploadAssetsStore.removeUploadAsset(uploadAsset.id);
|
||||
fileUploadHandler([uploadAsset.file], uploadAsset.albumId);
|
||||
};
|
||||
</script>
|
||||
|
||||
<div
|
||||
in:fade={{ duration: 250 }}
|
||||
out:fade={{ duration: 100 }}
|
||||
class="mt-3 grid h-[70px] grid-cols-[70px_auto] gap-2 rounded-lg bg-immich-bg text-xs"
|
||||
class="flex flex-col rounded-lg bg-immich-bg text-xs dark:bg-immich-dark-bg"
|
||||
>
|
||||
<div class="relative">
|
||||
{#if showFallbackImage}
|
||||
<div in:fade={{ duration: 250 }}>
|
||||
<ImmichLogo class="h-[70px] w-[70px] rounded-bl-lg rounded-tl-lg object-cover" />
|
||||
<div class="grid grid-cols-[65px_auto_auto]">
|
||||
<div class="relative h-[65px]">
|
||||
{#if showFallbackImage || true}
|
||||
<div in:fade={{ duration: 250 }}>
|
||||
<ImmichLogo class="h-[65px] w-[65px] rounded-bl-lg rounded-tl-lg object-cover p-2" />
|
||||
</div>
|
||||
{: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-[65px] w-[65px] rounded-bl-lg rounded-tl-lg object-cover"
|
||||
draggable="false"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<div class="absolute bottom-0 left-0 h-[25px] w-full rounded-bl-md bg-immich-primary/30">
|
||||
<p
|
||||
class="absolute bottom-1 right-1 stroke-immich-primary object-right-bottom font-semibold uppercase text-white/95 dark:text-gray-100"
|
||||
>
|
||||
.{getFilenameExtension(uploadAsset.file.name)}
|
||||
</p>
|
||||
</div>
|
||||
{: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] rounded-bl-lg rounded-tl-lg object-cover"
|
||||
draggable="false"
|
||||
</div>
|
||||
<div class="flex flex-col justify-between p-2 pr-2">
|
||||
<input
|
||||
disabled
|
||||
class="w-full rounded-md border bg-gray-100 p-1 px-2 text-[10px] dark:border-immich-dark-gray dark:bg-gray-900"
|
||||
value={`[${asByteUnitString(uploadAsset.file.size, $locale)}] ${uploadAsset.file.name}`}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<div class="absolute bottom-0 left-0 h-[25px] w-full bg-immich-primary/30">
|
||||
<p
|
||||
class="absolute bottom-1 right-1 stroke-immich-primary object-right-bottom font-semibold uppercase text-gray-50/95"
|
||||
<div
|
||||
class="relative mt-[5px] h-[15px] w-full rounded-md bg-gray-300 text-white dark:bg-immich-dark-gray dark:text-black"
|
||||
>
|
||||
.{getFilenameExtension(uploadAsset.file.name)}
|
||||
</p>
|
||||
{#if uploadAsset.state === UploadState.STARTED}
|
||||
<div class="h-[15px] rounded-md bg-immich-primary transition-all" style={`width: ${uploadAsset.progress}%`} />
|
||||
<p class="absolute top-0 h-full w-full text-center text-[10px]">
|
||||
{#if uploadAsset.message}
|
||||
{uploadAsset.message}
|
||||
{:else}
|
||||
{uploadAsset.progress}/100 - {asByteUnitString(uploadAsset.speed || 0, $locale)}/s - {uploadAsset.eta}s
|
||||
{/if}
|
||||
</p>
|
||||
{:else if uploadAsset.state === UploadState.PENDING}
|
||||
<div class="h-[15px] rounded-md bg-immich-dark-gray transition-all dark:bg-immich-gray" style="width: 100%" />
|
||||
<p class="absolute top-0 h-full w-full text-center text-[10px]">Pending</p>
|
||||
{:else if uploadAsset.state === UploadState.ERROR}
|
||||
<div class="h-[15px] rounded-md bg-immich-error transition-all" style="width: 100%" />
|
||||
<p class="absolute top-0 h-full w-full text-center text-[10px]">Error</p>
|
||||
{:else if uploadAsset.state === UploadState.DUPLICATED}
|
||||
<div class="h-[15px] rounded-md bg-immich-warning transition-all" style="width: 100%" />
|
||||
<p class="absolute top-0 h-full w-full text-center text-[10px]">
|
||||
Skipped
|
||||
{#if uploadAsset.message} ({uploadAsset.message}){/if}
|
||||
</p>
|
||||
{:else if uploadAsset.state === UploadState.DONE}
|
||||
<div class="h-[15px] rounded-md bg-immich-success transition-all" style="width: 100%" />
|
||||
<p class="absolute top-0 h-full w-full text-center text-[10px]">
|
||||
Uploaded
|
||||
{#if uploadAsset.message} ({uploadAsset.message}){/if}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if uploadAsset.state === UploadState.ERROR}
|
||||
<div class="flex h-full flex-col place-content-center place-items-center justify-items-center pr-2">
|
||||
<button
|
||||
on:click={() => handleRetry(uploadAsset)}
|
||||
title="Retry upload"
|
||||
class="flex h-full w-full place-content-center place-items-center text-sm"
|
||||
>
|
||||
<span class="text-immich-dark-gray dark:text-immich-dark-fg"><Refresh size="20" /></span>
|
||||
</button>
|
||||
<button
|
||||
on:click={() => uploadAssetsStore.removeUploadAsset(uploadAsset.id)}
|
||||
title="Dismiss error"
|
||||
class="flex h-full w-full place-content-center place-items-center text-sm"
|
||||
>
|
||||
<span class="text-immich-error"><Cancel size="20" /></span>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-between p-2 pr-4">
|
||||
<input
|
||||
disabled
|
||||
class="w-full rounded-md border bg-gray-100 p-1 px-2 text-[10px]"
|
||||
value={`[${asByteUnitString(uploadAsset.file.size, $locale)}] ${uploadAsset.file.name}`}
|
||||
/>
|
||||
|
||||
<div class="relative mt-[5px] h-[15px] w-full rounded-md bg-gray-300 text-white">
|
||||
<div class="h-[15px] rounded-md bg-immich-primary transition-all" style={`width: ${uploadAsset.progress}%`} />
|
||||
<p class="absolute top-0 h-full w-full text-center text-[10px]">
|
||||
{uploadAsset.progress}/100
|
||||
{#if uploadAsset.state === UploadState.ERROR}
|
||||
<div class="flex flex-row justify-between">
|
||||
<p class="w-full rounded-md p-1 px-2 text-justify text-[10px] text-immich-error">
|
||||
{uploadAsset.error}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user