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}

web/src/lib/models/upload-asset.ts

@@ -10,6 +10,7 @@ export type UploadAsset = {
   id: string;
   file: File;
   albumId?: string;
+  assetId?: string;
   progress?: number;
   state?: UploadState;
   startDate?: number;

web/src/lib/utils.ts

@@ -25,6 +25,7 @@ interface DownloadRequestOptions<T = unknown> {
 
 interface UploadRequestOptions {
   url: string;
+  method?: 'POST' | 'PUT';
   data: FormData;
   onUploadProgress?: (event: ProgressEvent<XMLHttpRequestEventTarget>) => void;
 }
@@ -64,7 +65,7 @@ export const uploadRequest = async <T>(options: UploadRequestOptions): Promise<{
       xhr.upload.addEventListener('progress', (event) => onProgress(event));
     }
 
-    xhr.open('POST', url);
+    xhr.open(options.method || 'POST', url);
     xhr.responseType = 'json';
     xhr.send(data);
   });
@@ -158,18 +159,28 @@ const createUrl = (path: string, parameters?: Record<string, unknown>) => {
   return getBaseUrl() + url.pathname + url.search + url.hash;
 };
 
-export const getAssetFileUrl = (...[assetId, isWeb, isThumb]: [string, boolean, boolean]) => {
+export const getAssetFileUrl = (
+  ...[assetId, isWeb, isThumb, checksum]:
+    | [assetId: string, isWeb: boolean, isThumb: boolean]
+    | [assetId: string, isWeb: boolean, isThumb: boolean, checksum: string]
+) => {
   const path = `/asset/file/${assetId}`;
-  return createUrl(path, { isThumb, isWeb, key: getKey() });
+  return createUrl(path, { isThumb, isWeb, key: getKey(), c: checksum });
 };
 
-export const getAssetThumbnailUrl = (...[assetId, format]: [string, ThumbnailFormat | undefined]) => {
+export const getAssetThumbnailUrl = (
+  ...[assetId, format, checksum]:
+    | [assetId: string, format: ThumbnailFormat | undefined]
+    | [assetId: string, format: ThumbnailFormat | undefined, checksum: string]
+) => {
+  // checksum (optional) is used as a cache-buster param, since thumbs are
+  // served with static resource cache headers
   const path = `/asset/thumbnail/${assetId}`;
-  return createUrl(path, { format, key: getKey() });
+  return createUrl(path, { format, key: getKey(), c: checksum });
 };
 
 export const getProfileImageUrl = (...[userId]: [string]) => {
-  const path = `/users/${userId}/profile-image`;
+  const path = `/users/profile-image/${userId}`;
   return createUrl(path);
 };
 

web/src/lib/utils/file-uploader.ts

@@ -5,10 +5,12 @@ import { addAssetsToAlbum } from '$lib/utils/asset-utils';
 import { ExecutorQueue } from '$lib/utils/executor-queue';
 import {
   Action,
+  AssetMediaStatus,
   checkBulkUpload,
   getBaseUrl,
   getSupportedMediaTypes,
   type AssetFileUploadResponseDto,
+  type AssetMediaResponseDto,
 } from '@immich/sdk';
 import { tick } from 'svelte';
 import { getServerErrorMessage, handleError } from './handle-error';
@@ -25,7 +27,12 @@ const getExtensions = async () => {
   return _extensions;
 };
 
-export const openFileUploadDialog = async (albumId?: string | undefined) => {
+type FileUploadParam = { multiple?: boolean } & (
+  | { albumId?: string; assetId?: never }
+  | { albumId?: never; assetId?: string }
+);
+export const openFileUploadDialog = async (options?: FileUploadParam) => {
+  const { albumId, multiple, assetId } = options || { multiple: true };
   const extensions = await getExtensions();
 
   return new Promise<(string | undefined)[]>((resolve, reject) => {
@@ -33,7 +40,7 @@ export const openFileUploadDialog = async (albumId?: string | undefined) => {
       const fileSelector = document.createElement('input');
 
       fileSelector.type = 'file';
-      fileSelector.multiple = true;
+      fileSelector.multiple = !!multiple;
       fileSelector.accept = extensions.join(',');
       fileSelector.addEventListener('change', (e: Event) => {
         const target = e.target as HTMLInputElement;
@@ -42,7 +49,7 @@ export const openFileUploadDialog = async (albumId?: string | undefined) => {
         }
         const files = Array.from(target.files);
 
-        resolve(fileUploadHandler(files, albumId));
+        resolve(fileUploadHandler(files, albumId, assetId));
       });
 
       fileSelector.click();
@@ -53,14 +60,14 @@ export const openFileUploadDialog = async (albumId?: string | undefined) => {
   });
 };
 
-export const fileUploadHandler = async (files: File[], albumId: string | undefined = undefined): Promise<string[]> => {
+export const fileUploadHandler = async (files: File[], albumId?: string, assetId?: string): Promise<string[]> => {
   const extensions = await getExtensions();
   const promises = [];
   for (const file of files) {
     const name = file.name.toLowerCase();
     if (extensions.some((extension) => name.endsWith(extension))) {
-      uploadAssetsStore.addNewUploadAsset({ id: getDeviceAssetId(file), file, albumId });
-      promises.push(uploadExecutionQueue.addTask(() => fileUploader(file, albumId)));
+      uploadAssetsStore.addNewUploadAsset({ id: getDeviceAssetId(file), file, albumId, assetId });
+      promises.push(uploadExecutionQueue.addTask(() => fileUploader(file, albumId, assetId)));
     }
   }
 
@@ -73,9 +80,9 @@ function getDeviceAssetId(asset: File) {
 }
 
 // TODO: should probably use the @api SDK
-async function fileUploader(asset: File, albumId: string | undefined = undefined): Promise<string | undefined> {
-  const fileCreatedAt = new Date(asset.lastModified).toISOString();
-  const deviceAssetId = getDeviceAssetId(asset);
+async function fileUploader(assetFile: File, albumId?: string, replaceAssetId?: string): Promise<string | undefined> {
+  const fileCreatedAt = new Date(assetFile.lastModified).toISOString();
+  const deviceAssetId = getDeviceAssetId(assetFile);
 
   uploadAssetsStore.markStarted(deviceAssetId);
 
@@ -85,21 +92,21 @@ async function fileUploader(asset: File, albumId: string | undefined = undefined
       deviceAssetId,
       deviceId: 'WEB',
       fileCreatedAt,
-      fileModifiedAt: new Date(asset.lastModified).toISOString(),
+      fileModifiedAt: new Date(assetFile.lastModified).toISOString(),
       isFavorite: 'false',
       duration: '0:00:00.000000',
-      assetData: new File([asset], asset.name),
+      assetData: new File([assetFile], assetFile.name),
     })) {
       formData.append(key, value);
     }
 
-    let responseData: AssetFileUploadResponseDto | undefined;
+    let responseData: AssetMediaResponseDto | undefined;
     const key = getKey();
     if (crypto?.subtle?.digest && !key) {
       uploadAssetsStore.updateAsset(deviceAssetId, { message: 'Hashing...' });
       await tick();
       try {
-        const bytes = await asset.arrayBuffer();
+        const bytes = await assetFile.arrayBuffer();
         const hash = await crypto.subtle.digest('SHA-1', bytes);
         const checksum = Array.from(new Uint8Array(hash))
           .map((b) => b.toString(16).padStart(2, '0'))
@@ -107,48 +114,64 @@ async function fileUploader(asset: File, albumId: string | undefined = undefined
 
         const {
           results: [checkUploadResult],
-        } = await checkBulkUpload({ assetBulkUploadCheckDto: { assets: [{ id: asset.name, checksum }] } });
+        } = await checkBulkUpload({ assetBulkUploadCheckDto: { assets: [{ id: assetFile.name, checksum }] } });
         if (checkUploadResult.action === Action.Reject && checkUploadResult.assetId) {
-          responseData = { duplicate: true, id: checkUploadResult.assetId };
+          responseData = { status: AssetMediaStatus.Duplicate, id: checkUploadResult.assetId };
         }
       } catch (error) {
-        console.error(`Error calculating sha1 file=${asset.name})`, error);
+        console.error(`Error calculating sha1 file=${assetFile.name})`, error);
       }
     }
 
+    let status;
+    let id;
     if (!responseData) {
       uploadAssetsStore.updateAsset(deviceAssetId, { message: 'Uploading...' });
-      const response = await uploadRequest<AssetFileUploadResponseDto>({
-        url: getBaseUrl() + '/asset/upload' + (key ? `?key=${key}` : ''),
-        data: formData,
-        onUploadProgress: (event) => uploadAssetsStore.updateProgress(deviceAssetId, event.loaded, event.total),
-      });
-      if (![200, 201].includes(response.status)) {
-        throw new Error('Failed to upload file');
+      if (replaceAssetId) {
+        const response = await uploadRequest<AssetMediaResponseDto>({
+          url: getBaseUrl() + '/asset/' + replaceAssetId + '/file' + (key ? `?key=${key}` : ''),
+          method: 'PUT',
+          data: formData,
+          onUploadProgress: (event) => uploadAssetsStore.updateProgress(deviceAssetId, event.loaded, event.total),
+        });
+        ({ status, id } = response.data);
+      } else {
+        const response = await uploadRequest<AssetFileUploadResponseDto>({
+          url: getBaseUrl() + '/asset/upload' + (key ? `?key=${key}` : ''),
+          data: formData,
+          onUploadProgress: (event) => uploadAssetsStore.updateProgress(deviceAssetId, event.loaded, event.total),
+        });
+        if (![200, 201].includes(response.status)) {
+          throw new Error('Failed to upload file');
+        }
+        if (response.data.duplicate) {
+          status = AssetMediaStatus.Duplicate;
+        } else {
+          id = response.data.id;
+        }
       }
-      responseData = response.data;
     }
-    const { duplicate, id: assetId } = responseData;
 
-    if (duplicate) {
+    if (status === AssetMediaStatus.Duplicate) {
       uploadAssetsStore.duplicateCounter.update((count) => count + 1);
     } else {
       uploadAssetsStore.successCounter.update((c) => c + 1);
+      if (albumId && id) {
+        uploadAssetsStore.updateAsset(deviceAssetId, { message: 'Adding to album...' });
+        await addAssetsToAlbum(albumId, [id]);
+        uploadAssetsStore.updateAsset(deviceAssetId, { message: 'Added to album' });
+      }
     }
 
-    if (albumId && assetId) {
-      uploadAssetsStore.updateAsset(deviceAssetId, { message: 'Adding to album...' });
-      await addAssetsToAlbum(albumId, [assetId]);
-      uploadAssetsStore.updateAsset(deviceAssetId, { message: 'Added to album' });
-    }
-
-    uploadAssetsStore.updateAsset(deviceAssetId, { state: duplicate ? UploadState.DUPLICATED : UploadState.DONE });
+    uploadAssetsStore.updateAsset(deviceAssetId, {
+      state: status === AssetMediaStatus.Duplicate ? UploadState.DUPLICATED : UploadState.DONE,
+    });
 
     setTimeout(() => {
       uploadAssetsStore.removeUploadAsset(deviceAssetId);
     }, 1000);
 
-    return assetId;
+    return id;
   } catch (error) {
     handleError(error, 'Unable to upload file');
     const reason = getServerErrorMessage(error) || error;