mirror of https://github.com/immich-app/immich.git
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>pull/3948/head
Villena Guillaume
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>
|
||||
|
||||
@ -1,5 +1,20 @@
|
||||
export enum UploadState {
|
||||
PENDING,
|
||||
STARTED,
|
||||
DONE,
|
||||
ERROR,
|
||||
DUPLICATED,
|
||||
}
|
||||
|
||||
export type UploadAsset = {
|
||||
id: string;
|
||||
file: File;
|
||||
progress: number;
|
||||
albumId?: string;
|
||||
progress?: number;
|
||||
state?: UploadState;
|
||||
startDate?: number;
|
||||
eta?: number;
|
||||
speed?: number;
|
||||
error?: unknown;
|
||||
message?: string;
|
||||
};
|
||||
|
||||
@ -0,0 +1,54 @@
|
||||
import { ExecutorQueue } from '$lib/utils/executor-queue';
|
||||
|
||||
describe('Executor Queue test', function () {
|
||||
it('should run all promises', async function () {
|
||||
const eq = new ExecutorQueue({ concurrency: 1 });
|
||||
const n1 = await eq.addTask(() => Promise.resolve(10));
|
||||
expect(n1).toBe(10);
|
||||
const n2 = await eq.addTask(() => Promise.resolve(11));
|
||||
expect(n2).toBe(11);
|
||||
const n3 = await eq.addTask(() => Promise.resolve(12));
|
||||
expect(n3).toBe(12);
|
||||
});
|
||||
|
||||
it('should respect concurrency parameter', function () {
|
||||
jest.useFakeTimers();
|
||||
const eq = new ExecutorQueue({ concurrency: 3 });
|
||||
|
||||
const finished = jest.fn();
|
||||
const started = jest.fn();
|
||||
|
||||
const timeoutPromiseBuilder = (delay: number, id: string) =>
|
||||
new Promise((resolve) => {
|
||||
console.log('Task is running: ', id);
|
||||
started();
|
||||
setTimeout(() => {
|
||||
console.log('Finished ' + id + ' after', delay, 'ms');
|
||||
finished();
|
||||
resolve(undefined);
|
||||
}, delay);
|
||||
});
|
||||
|
||||
// The first 3 should be finished within 200ms (concurrency 3)
|
||||
eq.addTask(() => timeoutPromiseBuilder(100, 'T1'));
|
||||
eq.addTask(() => timeoutPromiseBuilder(200, 'T2'));
|
||||
eq.addTask(() => timeoutPromiseBuilder(150, 'T3'));
|
||||
// The last task will be executed after 200ms and will finish at 400ms
|
||||
eq.addTask(() => timeoutPromiseBuilder(200, 'T4'));
|
||||
|
||||
expect(finished).not.toBeCalled();
|
||||
expect(started).toHaveBeenCalledTimes(3);
|
||||
|
||||
jest.advanceTimersByTime(100);
|
||||
expect(finished).toHaveBeenCalledTimes(1);
|
||||
|
||||
jest.advanceTimersByTime(250);
|
||||
expect(finished).toHaveBeenCalledTimes(3);
|
||||
// expect(started).toHaveBeenCalledTimes(4)
|
||||
|
||||
//TODO : fix The test ...
|
||||
|
||||
jest.runAllTimers();
|
||||
jest.useRealTimers();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,69 @@
|
||||
interface Options {
|
||||
concurrency: number;
|
||||
}
|
||||
|
||||
type Runnable = () => Promise<unknown>;
|
||||
|
||||
export class ExecutorQueue {
|
||||
private queue: Array<Runnable> = [];
|
||||
private running = 0;
|
||||
private _concurrency: number;
|
||||
|
||||
constructor(options?: Options) {
|
||||
this._concurrency = options?.concurrency || 2;
|
||||
}
|
||||
|
||||
get concurrency() {
|
||||
return this._concurrency;
|
||||
}
|
||||
|
||||
set concurrency(concurrency: number) {
|
||||
if (concurrency < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._concurrency = concurrency;
|
||||
|
||||
const v = concurrency - this.running;
|
||||
if (v > 0) {
|
||||
[...new Array(this._concurrency)].forEach(() => this.tryRun());
|
||||
}
|
||||
}
|
||||
|
||||
addTask<T>(task: () => Promise<T>): Promise<T> {
|
||||
return new Promise((resolve, reject) => {
|
||||
// Add a custom task that wrap the original one;
|
||||
this.queue.push(async () => {
|
||||
try {
|
||||
this.running++;
|
||||
const result = task();
|
||||
resolve(await result);
|
||||
} catch (e) {
|
||||
reject(e);
|
||||
} finally {
|
||||
this.taskFinished();
|
||||
}
|
||||
});
|
||||
// Then run it if possible !
|
||||
this.tryRun();
|
||||
});
|
||||
}
|
||||
|
||||
private taskFinished(): void {
|
||||
this.running--;
|
||||
this.tryRun();
|
||||
}
|
||||
|
||||
private tryRun() {
|
||||
if (this.running >= this.concurrency) {
|
||||
return;
|
||||
}
|
||||
|
||||
const runnable = this.queue.shift();
|
||||
if (!runnable) {
|
||||
return;
|
||||
}
|
||||
|
||||
runnable();
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue