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>

web/src/lib/components/elements/buttons/circle-icon-button.svelte

@@ -4,6 +4,7 @@
   export let logo: typeof Icon;
   export let backgroundColor = 'transparent';
   export let hoverColor = '#e2e7e9';
+  export let padding = '3';
   export let size = '24';
   export let title = '';
   export let isOpacity = false;
@@ -16,7 +17,7 @@
   style:background-color={backgroundColor}
   style:--immich-icon-button-hover-color={hoverColor}
   class:dark:text-immich-dark-fg={!forceDark}
-  class="flex place-content-center place-items-center rounded-full p-3 transition-all
+  class="flex place-content-center place-items-center rounded-full p-{padding} transition-all
 	{isOpacity ? 'hover:bg-immich-bg/30' : 'immich-circle-icon-button hover:dark:text-immich-dark-gray'}
   {forceDark && 'hover:text-black'}
   {hideMobile && 'hidden sm:flex'}"

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

@@ -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>

web/src/lib/components/shared-components/upload-panel.svelte

@@ -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>