feat: API operation replaceAsset, POST /api/asset/:id/file (#9684)

* impl and unit tests for replaceAsset

* Remove it.only

* Typo in generated spec +regen

* Remove unused dtos

* Dto removal fallout/bugfix

* fix - missed a line

* sql:generate

* Review comments

* Unused imports

* chore: clean up

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

web/src/lib/components/album-page/album-viewer.svelte

@@ -75,7 +75,7 @@
         {#if sharedLink.allowUpload}
           <CircleIconButton
             title="Add Photos"
-            on:click={() => openFileUploadDialog(album.id)}
+            on:click={() => openFileUploadDialog({ albumId: album.id })}
             icon={mdiFileImagePlusOutline}
           />
         {/if}

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -5,7 +5,8 @@
   import { getAssetJobName } from '$lib/utils';
   import { clickOutside } from '$lib/actions/click-outside';
   import { getContextMenuPosition } from '$lib/utils/context-menu';
-  import { AssetJobName, AssetTypeEnum, type AssetResponseDto, type AlbumResponseDto } from '@immich/sdk';
+  import { openFileUploadDialog } from '$lib/utils/file-uploader';
+  import { AssetJobName, AssetTypeEnum, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';
   import {
     mdiAccountCircleOutline,
     mdiAlertOutline,
@@ -32,6 +33,7 @@
     mdiPlaySpeed,
     mdiPresentationPlay,
     mdiShareVariantOutline,
+    mdiUpload,
   } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
   import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
@@ -243,6 +245,11 @@
                 icon={asset.isArchived ? mdiArchiveArrowUpOutline : mdiArchiveArrowDownOutline}
                 text={asset.isArchived ? 'Unarchive' : 'Archive'}
               />
+              <MenuOption
+                icon={mdiUpload}
+                on:click={() => openFileUploadDialog({ multiple: false, assetId: asset.id })}
+                text="Replace with upload"
+              />
               <hr />
               <MenuOption
                 icon={mdiDatabaseRefreshOutline}

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -52,6 +52,7 @@
   import SlideshowBar from './slideshow-bar.svelte';
   import VideoViewer from './video-wrapper-viewer.svelte';
   import { navigate } from '$lib/utils/navigation';
+  import { websocketEvents } from '$lib/stores/websocket';
 
   export let assetStore: AssetStore | null = null;
   export let asset: AssetResponseDto;
@@ -98,7 +99,7 @@
   let isLiked: ActivityResponseDto | null = null;
   let numberOfComments: number;
   let fullscreenElement: Element;
-
+  let unsubscribe: () => void;
   $: isFullScreen = fullscreenElement !== null;
 
   $: {
@@ -192,6 +193,11 @@
   }
 
   onMount(async () => {
+    unsubscribe = websocketEvents.on('on_upload_success', (assetUpdate) => {
+      if (assetUpdate.id === asset.id) {
+        asset = assetUpdate;
+      }
+    });
     await navigate({ targetRoute: 'current', assetId: asset.id });
     slideshowStateUnsubscribe = slideshowState.subscribe((value) => {
       if (value === SlideshowState.PlaySlideshow) {
@@ -237,6 +243,7 @@
     if (shuffleSlideshowUnsubscribe) {
       shuffleSlideshowUnsubscribe();
     }
+    unsubscribe?.();
   });
 
   $: asset.id && !sharedLink && handlePromiseError(handleGetAllAlbums()); // Update the album information when the asset ID changes
@@ -633,6 +640,7 @@
           {:else}
             <VideoViewer
               assetId={previewStackedAsset.id}
+              checksum={previewStackedAsset.checksum}
               projectionType={previewStackedAsset.exifInfo?.projectionType}
               loopVideo={true}
               on:close={closeViewer}
@@ -655,6 +663,7 @@
             {#if shouldPlayMotionPhoto && asset.livePhotoVideoId}
               <VideoViewer
                 assetId={asset.livePhotoVideoId}
+                checksum={asset.checksum}
                 projectionType={asset.exifInfo?.projectionType}
                 loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
                 on:close={closeViewer}
@@ -670,6 +679,7 @@
           {:else}
             <VideoViewer
               assetId={asset.id}
+              checksum={asset.checksum}
               projectionType={asset.exifInfo?.projectionType}
               loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
               on:close={closeViewer}

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -3,7 +3,7 @@
   import { boundingBoxesArray } from '$lib/stores/people.store';
   import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
   import { photoZoomState } from '$lib/stores/zoom-image.store';
-  import { downloadRequest, getAssetFileUrl, handlePromiseError } from '$lib/utils';
+  import { getAssetFileUrl, handlePromiseError } from '$lib/utils';
   import { isWebCompatibleImage } from '$lib/utils/asset-utils';
   import { getBoundingBox } from '$lib/utils/people-utils';
   import { shortcuts } from '$lib/actions/shortcut';
@@ -24,12 +24,14 @@
   export let haveFadeTransition = true;
 
   let imgElement: HTMLDivElement;
-  let assetData: string;
-  let abortController: AbortController;
-  let hasZoomed = false;
+  let assetFileUrl: string = '';
   let copyImageToClipboard: (source: string) => Promise<Blob>;
   let canCopyImagesToClipboard: () => boolean;
   let imageLoaded: boolean = false;
+  let imageError: boolean = false;
+  // set to true when am image has been zoomed, to force loading of the original image regardless
+  // of app settings
+  let forceLoadOriginal: boolean = false;
 
   const loadOriginalByDefault = $alwaysLoadOriginalFile && isWebCompatibleImage(asset);
 
@@ -40,60 +42,53 @@
     });
   }
 
+  $: {
+    preload({ preloadAssets, loadOriginal: loadOriginalByDefault });
+  }
+
+  $: assetFileUrl = load(asset.id, !loadOriginalByDefault || forceLoadOriginal, false, asset.checksum);
+
   onMount(async () => {
     // Import hack :( see https://github.com/vadimkorr/svelte-carousel/issues/27#issuecomment-851022295
     // TODO: Move to regular import once the package correctly supports ESM.
     const module = await import('copy-image-clipboard');
     copyImageToClipboard = module.copyImageToClipboard;
     canCopyImagesToClipboard = module.canCopyImagesToClipboard;
-
-    imageLoaded = false;
-    await loadAssetData({ loadOriginal: loadOriginalByDefault });
   });
 
   onDestroy(() => {
     $boundingBoxesArray = [];
-    abortController?.abort();
   });
 
-  const loadAssetData = async ({ loadOriginal }: { loadOriginal: boolean }) => {
-    try {
-      abortController?.abort();
-      abortController = new AbortController();
-
-      // TODO: Use sdk once it supports signals
-      const { data } = await downloadRequest({
-        url: getAssetFileUrl(asset.id, !loadOriginal, false),
-        signal: abortController.signal,
-      });
-
-      assetData = URL.createObjectURL(data);
-      imageLoaded = true;
-
-      if (!preloadAssets) {
-        return;
+  const preload = ({
+    preloadAssets,
+    loadOriginal,
+  }: {
+    preloadAssets: AssetResponseDto[] | null;
+    loadOriginal: boolean;
+  }) => {
+    for (const preloadAsset of preloadAssets || []) {
+      if (preloadAsset.type === AssetTypeEnum.Image) {
+        let img = new Image();
+        img.src = getAssetFileUrl(preloadAsset.id, !loadOriginal, false, preloadAsset.checksum);
       }
-
-      for (const preloadAsset of preloadAssets) {
-        if (preloadAsset.type === AssetTypeEnum.Image) {
-          await downloadRequest({
-            url: getAssetFileUrl(preloadAsset.id, !loadOriginal, false),
-            signal: abortController.signal,
-          });
-        }
-      }
-    } catch {
-      imageLoaded = false;
     }
   };
 
+  const load = (assetId: string, isWeb: boolean, isThumb: boolean, checksum: string) => {
+    const assetUrl = getAssetFileUrl(assetId, isWeb, isThumb, checksum);
+    // side effect, only flag imageLoaded when url is different
+    imageLoaded = assetFileUrl === assetUrl;
+    return assetUrl;
+  };
+
   const doCopy = async () => {
     if (!canCopyImagesToClipboard()) {
       return;
     }
 
     try {
-      await copyImageToClipboard(assetData);
+      await copyImageToClipboard(assetFileUrl);
       notificationController.show({
         type: NotificationType.Info,
         message: 'Copied image to clipboard.',
@@ -122,12 +117,7 @@
 
   zoomImageWheelState.subscribe((state) => {
     photoZoomState.set(state);
-
-    if (state.currentZoom > 1 && isWebCompatibleImage(asset) && !hasZoomed && !$alwaysLoadOriginalFile) {
-      hasZoomed = true;
-
-      handlePromiseError(loadAssetData({ loadOriginal: true }));
-    }
+    forceLoadOriginal = state.currentZoom > 1 && isWebCompatibleImage(asset) ? true : false;
   });
 
   const onCopyShortcut = () => {
@@ -146,41 +136,53 @@
     { shortcut: { key: 'c', meta: true }, onShortcut: onCopyShortcut },
   ]}
 />
-
-<div
-  bind:this={element}
-  transition:fade={{ duration: haveFadeTransition ? 150 : 0 }}
-  class="relative h-full select-none"
->
+{#if imageError}
+  <div class="h-full flex items-center justify-center">Error loading image</div>
+{/if}
+<div bind:this={element} class="relative h-full select-none">
+  <img
+    style="display:none"
+    src={assetFileUrl}
+    alt={getAltText(asset)}
+    on:load={() => (imageLoaded = true)}
+    on:error={() => (imageError = imageLoaded = true)}
+  />
   {#if !imageLoaded}
-    <div class="flex h-full items-center justify-center">
+    <div class:hidden={imageLoaded} class="flex h-full items-center justify-center">
       <LoadingSpinner />
     </div>
-  {:else}
-    <div bind:this={imgElement} class="h-full w-full" transition:fade={{ duration: haveFadeTransition ? 150 : 0 }}>
-      {#if $slideshowState !== SlideshowState.None && $slideshowLook === SlideshowLook.BlurredBackground}
+  {:else if !imageError}
+    {#key assetFileUrl}
+      <div
+        bind:this={imgElement}
+        class:hidden={!imageLoaded}
+        class="h-full w-full"
+        transition:fade={{ duration: haveFadeTransition ? 150 : 0 }}
+      >
+        {#if $slideshowState !== SlideshowState.None && $slideshowLook === SlideshowLook.BlurredBackground}
+          <img
+            src={assetFileUrl}
+            alt={getAltText(asset)}
+            class="absolute top-0 left-0 -z-10 object-cover h-full w-full blur-lg"
+            draggable="false"
+          />
+        {/if}
         <img
-          src={assetData}
+          bind:this={$photoViewer}
+          src={assetFileUrl}
           alt={getAltText(asset)}
-          class="absolute top-0 left-0 -z-10 object-cover h-full w-full blur-lg"
+          class="h-full w-full {$slideshowState === SlideshowState.None
+            ? 'object-contain'
+            : slideshowLookCssMapping[$slideshowLook]}"
           draggable="false"
         />
-      {/if}
-      <img
-        bind:this={$photoViewer}
-        src={assetData}
-        alt={getAltText(asset)}
-        class="h-full w-full {$slideshowState === SlideshowState.None
-          ? 'object-contain'
-          : slideshowLookCssMapping[$slideshowLook]}"
-        draggable="false"
-      />
-      {#each getBoundingBox($boundingBoxesArray, $photoZoomState, $photoViewer) as boundingbox}
-        <div
-          class="absolute border-solid border-white border-[3px] rounded-lg"
-          style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
-        />
-      {/each}
-    </div>
+        {#each getBoundingBox($boundingBoxesArray, $photoZoomState, $photoViewer) as boundingbox}
+          <div
+            class="absolute border-solid border-white border-[3px] rounded-lg"
+            style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
+          />
+        {/each}
+      </div>
+    {/key}
   {/if}
 </div>

web/src/lib/components/asset-viewer/video-native-viewer.svelte

@@ -9,9 +9,19 @@
 
   export let assetId: string;
   export let loopVideo: boolean;
+  export let checksum: string;
 
   let element: HTMLVideoElement | undefined = undefined;
   let isVideoLoading = true;
+  let assetFileUrl: string;
+
+  $: {
+    const next = getAssetFileUrl(assetId, false, true, checksum);
+    if (assetFileUrl !== next) {
+      assetFileUrl = next;
+      element && element.load();
+    }
+  }
 
   const dispatch = createEventDispatcher<{ onVideoEnded: void; onVideoStarted: void }>();
 
@@ -44,9 +54,9 @@
     on:ended={() => dispatch('onVideoEnded')}
     bind:muted={$videoViewerMuted}
     bind:volume={$videoViewerVolume}
-    poster={getAssetThumbnailUrl(assetId, ThumbnailFormat.Jpeg)}
+    poster={getAssetThumbnailUrl(assetId, ThumbnailFormat.Jpeg, checksum)}
   >
-    <source src={getAssetFileUrl(assetId, false, true)} type="video/mp4" />
+    <source src={assetFileUrl} type="video/mp4" />
     <track kind="captions" />
   </video>
 

web/src/lib/components/asset-viewer/video-wrapper-viewer.svelte

@@ -6,11 +6,12 @@
 
   export let assetId: string;
   export let projectionType: string | null | undefined;
+  export let checksum: string;
   export let loopVideo: boolean;
 </script>
 
 {#if projectionType === ProjectionType.EQUIRECTANGULAR}
   <PanoramaViewer asset={{ id: assetId, type: AssetTypeEnum.Video }} />
 {:else}
-  <VideoNativeViewer {loopVideo} {assetId} on:onVideoEnded on:onVideoStarted />
+  <VideoNativeViewer {loopVideo} {checksum} {assetId} on:onVideoEnded on:onVideoStarted />
 {/if}

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -180,7 +180,7 @@
 
         {#if asset.resized}
           <ImageThumbnail
-            url={getAssetThumbnailUrl(asset.id, format)}
+            url={getAssetThumbnailUrl(asset.id, format, asset.checksum)}
             altText={getAltText(asset)}
             widthStyle="{width}px"
             heightStyle="{height}px"
@@ -196,7 +196,7 @@
         {#if asset.type === AssetTypeEnum.Video}
           <div class="absolute top-0 h-full w-full">
             <VideoThumbnail
-              url={getAssetFileUrl(asset.id, false, true)}
+              url={getAssetFileUrl(asset.id, false, true, asset.checksum)}
               enablePlayback={mouseOver && $playVideoThumbnailOnHover}
               curve={selected}
               durationInSeconds={timeToSeconds(asset.duration)}
@@ -208,7 +208,7 @@
         {#if asset.type === AssetTypeEnum.Image && asset.livePhotoVideoId}
           <div class="absolute top-0 h-full w-full">
             <VideoThumbnail
-              url={getAssetFileUrl(asset.livePhotoVideoId, false, true)}
+              url={getAssetFileUrl(asset.livePhotoVideoId, false, true, asset.checksum)}
               pauseIcon={mdiMotionPauseOutline}
               playIcon={mdiMotionPlayOutline}
               showTime={false}