You've already forked immich
mirror of
https://github.com/immich-app/immich.git
synced 2025-06-28 05:18:38 +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,84 +1,129 @@
|
||||
<script lang="ts">
|
||||
import { quartInOut } from 'svelte/easing';
|
||||
import { scale, fade } from 'svelte/transition';
|
||||
import { fade, scale } from 'svelte/transition';
|
||||
import { uploadAssetsStore } from '$lib/stores/upload';
|
||||
import CloudUploadOutline from 'svelte-material-icons/CloudUploadOutline.svelte';
|
||||
import WindowMinimize from 'svelte-material-icons/WindowMinimize.svelte';
|
||||
import Cancel from 'svelte-material-icons/Cancel.svelte';
|
||||
import Cog from 'svelte-material-icons/Cog.svelte';
|
||||
import { notificationController, NotificationType } from './notification/notification';
|
||||
import UploadAssetPreview from './upload-asset-preview.svelte';
|
||||
import { uploadExecutionQueue } from '$lib/utils/file-uploader';
|
||||
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
|
||||
|
||||
let showDetail = true;
|
||||
let uploadLength = 0;
|
||||
let duplicateCount = 0;
|
||||
let errorCount = 0;
|
||||
let isUploading = false;
|
||||
let showDetail = false;
|
||||
let showOptions = false;
|
||||
let concurrency = uploadExecutionQueue.concurrency;
|
||||
|
||||
// Reactive action to update asset uploadLength whenever there is a new one added to the list
|
||||
$: {
|
||||
if ($uploadAssetsStore.length != uploadLength) {
|
||||
uploadLength = $uploadAssetsStore.length;
|
||||
let { isUploading, hasError, remainingUploads, errorCounter, duplicateCounter, successCounter, totalUploadCounter } =
|
||||
uploadAssetsStore;
|
||||
|
||||
const autoHide = () => {
|
||||
if (!$isUploading && showDetail) {
|
||||
showDetail = false;
|
||||
}
|
||||
}
|
||||
|
||||
uploadAssetsStore.isUploading.subscribe((value) => {
|
||||
isUploading = value;
|
||||
});
|
||||
if ($isUploading && !showDetail) {
|
||||
showDetail = true;
|
||||
}
|
||||
};
|
||||
|
||||
uploadAssetsStore.duplicateCounter.subscribe((value) => {
|
||||
duplicateCount = value;
|
||||
});
|
||||
|
||||
uploadAssetsStore.errorCounter.subscribe((value) => {
|
||||
errorCount = value;
|
||||
});
|
||||
$: $isUploading && autoHide();
|
||||
</script>
|
||||
|
||||
{#if isUploading}
|
||||
{#if $hasError || $isUploading}
|
||||
<div
|
||||
in:fade={{ duration: 250 }}
|
||||
out:fade={{ duration: 250, delay: 1000 }}
|
||||
out:fade={{ duration: 250 }}
|
||||
on:outroend={() => {
|
||||
const errorInfo =
|
||||
errorCount > 0 ? `Upload completed with ${errorCount} error${errorCount > 1 ? 's' : ''}` : 'Upload success';
|
||||
const type = errorCount > 0 ? NotificationType.Warning : NotificationType.Info;
|
||||
$errorCounter > 0
|
||||
? `Upload completed with ${$errorCounter} error${$errorCounter > 1 ? 's' : ''}`
|
||||
: 'Upload success';
|
||||
const type = $errorCounter > 0 ? NotificationType.Warning : NotificationType.Info;
|
||||
|
||||
notificationController.show({
|
||||
message: `${errorInfo}, refresh the page to see new upload assets`,
|
||||
type,
|
||||
});
|
||||
|
||||
uploadAssetsStore.errorCounter.set(0);
|
||||
|
||||
if (duplicateCount > 0) {
|
||||
if ($duplicateCounter > 0) {
|
||||
notificationController.show({
|
||||
message: `Skipped ${duplicateCount} duplicate picture${duplicateCount > 1 ? 's' : ''}`,
|
||||
message: `Skipped ${$duplicateCounter} duplicate picture${$duplicateCounter > 1 ? 's' : ''}`,
|
||||
type: NotificationType.Warning,
|
||||
});
|
||||
uploadAssetsStore.duplicateCounter.set(0);
|
||||
}
|
||||
|
||||
uploadAssetsStore.resetStore();
|
||||
}}
|
||||
class="absolute bottom-6 right-6 z-[10000]"
|
||||
>
|
||||
{#if showDetail}
|
||||
<div
|
||||
in:scale={{ duration: 250, easing: quartInOut }}
|
||||
class="w-[300px] rounded-lg border bg-gray-200 p-4 text-sm shadow-sm"
|
||||
class="w-[300px] rounded-lg border bg-gray-100 p-4 text-sm shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-white"
|
||||
>
|
||||
<div class="place-item-center mb-4 flex justify-between">
|
||||
<p class="text-xs text-gray-500">UPLOADING {$uploadAssetsStore.length}</p>
|
||||
<button
|
||||
on:click={() => (showDetail = false)}
|
||||
class="flex h-[20px] w-[20px] place-content-center place-items-center rounded-full bg-gray-50 transition-colors hover:bg-gray-100"
|
||||
>
|
||||
<WindowMinimize />
|
||||
</button>
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="immich-form-label text-xm">
|
||||
Remaining {$remainingUploads} - Processed {$successCounter + $errorCounter}/{$totalUploadCounter}
|
||||
</p>
|
||||
<p class="immich-form-label text-xs">
|
||||
Uploaded <span class="text-immich-success">{$successCounter}</span> - Error
|
||||
<span class="text-immich-error">{$errorCounter}</span>
|
||||
- Duplicates <span class="text-immich-warning">{$duplicateCounter}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-end">
|
||||
<div class="flex flex-row">
|
||||
<CircleIconButton
|
||||
title="Toggle settings"
|
||||
logo={Cog}
|
||||
size="14"
|
||||
padding="1"
|
||||
on:click={() => (showOptions = !showOptions)}
|
||||
/>
|
||||
<CircleIconButton
|
||||
title="Minimize"
|
||||
logo={WindowMinimize}
|
||||
size="14"
|
||||
padding="1"
|
||||
on:click={() => (showDetail = false)}
|
||||
/>
|
||||
</div>
|
||||
{#if $hasError}
|
||||
<CircleIconButton
|
||||
title="Dismiss all errors"
|
||||
logo={Cancel}
|
||||
size="14"
|
||||
padding="1"
|
||||
on:click={() => uploadAssetsStore.dismissErrors()}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="immich-scrollbar max-h-[400px] overflow-y-auto rounded-lg pr-2">
|
||||
{#each $uploadAssetsStore as uploadAsset}
|
||||
{#key uploadAsset.id}
|
||||
<UploadAssetPreview {uploadAsset} />
|
||||
{/key}
|
||||
{#if showOptions}
|
||||
<div class="immich-scrollbar mb-4 max-h-[400px] overflow-y-auto rounded-lg pr-2">
|
||||
<div class="flex h-[26px] place-items-center gap-1">
|
||||
<label class="immich-form-label" for="upload-concurrency">Upload concurrency</label>
|
||||
</div>
|
||||
<input
|
||||
class="immich-form-input w-full"
|
||||
aria-labelledby="Upload concurrency"
|
||||
id="upload-concurrency"
|
||||
name="Upload concurrency"
|
||||
type="number"
|
||||
min="1"
|
||||
max="50"
|
||||
step="1"
|
||||
bind:value={concurrency}
|
||||
on:change={() => (uploadExecutionQueue.concurrency = concurrency)}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="immich-scrollbar flex max-h-[400px] flex-col gap-2 overflow-y-auto rounded-lg pr-2">
|
||||
{#each $uploadAssetsStore as uploadAsset (uploadAsset.id)}
|
||||
<UploadAssetPreview {uploadAsset} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
@ -89,15 +134,24 @@
|
||||
on:click={() => (showDetail = true)}
|
||||
class="absolute -left-4 -top-4 flex h-10 w-10 place-content-center place-items-center rounded-full bg-immich-primary p-5 text-xs text-gray-200"
|
||||
>
|
||||
{$uploadAssetsStore.length}
|
||||
{$remainingUploads}
|
||||
</button>
|
||||
{#if $hasError}
|
||||
<button
|
||||
in:scale={{ duration: 250, easing: quartInOut }}
|
||||
on:click={() => (showDetail = true)}
|
||||
class="absolute -right-4 -top-4 flex h-10 w-10 place-content-center place-items-center rounded-full bg-immich-error p-5 text-xs text-gray-200"
|
||||
>
|
||||
{$errorCounter}
|
||||
</button>
|
||||
{/if}
|
||||
<button
|
||||
in:scale={{ duration: 250, easing: quartInOut }}
|
||||
on:click={() => (showDetail = true)}
|
||||
class="flex h-16 w-16 place-content-center place-items-center rounded-full bg-gray-300 p-5 text-sm shadow-lg"
|
||||
class="flex h-16 w-16 place-content-center place-items-center rounded-full bg-gray-200 p-5 text-sm text-immich-primary shadow-lg dark:bg-gray-600 dark:text-immich-gray"
|
||||
>
|
||||
<div class="animate-pulse">
|
||||
<CloudUploadOutline size="30" color="#4250af" />
|
||||
<CloudUploadOutline size="30" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user