fix(web): show trash indicator (#12521)

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

@@ -15,6 +15,7 @@
     mdiLoading,
     mdiOpenInNew,
     mdiRestart,
+    mdiTrashCan,
   } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
@@ -29,6 +30,10 @@
     uploadAssetsStore.removeItem(uploadAsset.id);
     await fileUploadHandler([uploadAsset.file], uploadAsset.albumId);
   };
+
+  const asLink = (asset: UploadAsset) => {
+    return asset.isTrashed ? `${AppRoute.TRASH}/${asset.assetId}` : `${AppRoute.PHOTOS}/${uploadAsset.assetId}`;
+  };
 </script>
 
 <div
@@ -45,7 +50,11 @@
       {:else if uploadAsset.state === UploadState.ERROR}
         <Icon path={mdiAlertCircle} size="24" class="text-immich-error" title={$t('error')} />
       {:else if uploadAsset.state === UploadState.DUPLICATED}
-        <Icon path={mdiAlertCircle} size="24" class="text-immich-warning" title={$t('asset_skipped')} />
+        {#if uploadAsset.isTrashed}
+          <Icon path={mdiTrashCan} size="24" class="text-gray-500" title={$t('asset_skipped_in_trash')} />
+        {:else}
+          <Icon path={mdiAlertCircle} size="24" class="text-immich-warning" title={$t('asset_skipped')} />
+        {/if}
       {:else if uploadAsset.state === UploadState.DONE}
         <Icon path={mdiCheckCircle} size="24" class="text-immich-success" title={$t('asset_uploaded')} />
       {/if}
@@ -56,7 +65,7 @@
     {#if uploadAsset.state === UploadState.DUPLICATED && uploadAsset.assetId}
       <div class="flex items-center justify-between gap-1">
         <a
-          href="{AppRoute.PHOTOS}/{uploadAsset.assetId}"
+          href={asLink(uploadAsset)}
           target="_blank"
           rel="noopener noreferrer"
           class=""

web/src/lib/i18n/en.json

@@ -387,6 +387,7 @@
   "asset_offline": "Asset offline",
   "asset_offline_description": "This asset is offline. Immich can not access its file location. Please ensure the asset is available and then rescan the library.",
   "asset_skipped": "Skipped",
+  "asset_skipped_in_trash": "In trash",
   "asset_uploaded": "Uploaded",
   "asset_uploading": "Uploading...",
   "assets": "Assets",

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

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

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

@@ -28,7 +28,9 @@ export const addDummyItems = () => {
   uploadAssetsStore.addItem({ id: 'asset-3', file: { name: 'asset3.jpg', size: 123_456 } as File });
   uploadAssetsStore.updateItem('asset-3', { state: UploadState.DUPLICATED, assetId: 'asset-2' });
   uploadAssetsStore.addItem({ id: 'asset-4', file: { name: 'asset3.jpg', size: 123_456 } as File });
-  uploadAssetsStore.updateItem('asset-4', { state: UploadState.DONE });
+  uploadAssetsStore.updateItem('asset-4', { state: UploadState.DUPLICATED, assetId: 'asset-2', isTrashed: true });
+  uploadAssetsStore.addItem({ id: 'asset-10', file: { name: 'asset3.jpg', size: 123_456 } as File });
+  uploadAssetsStore.updateItem('asset-10', { state: UploadState.DONE });
   uploadAssetsStore.track('error');
   uploadAssetsStore.track('success');
   uploadAssetsStore.track('duplicate');
@@ -122,7 +124,7 @@ async function fileUploader(assetFile: File, albumId?: string, replaceAssetId?:
       formData.append(key, value);
     }
 
-    let responseData: AssetMediaResponseDto | undefined;
+    let responseData: { id: string; status: AssetMediaStatus; isTrashed?: boolean } | undefined;
     const key = getKey();
     if (crypto?.subtle?.digest && !key) {
       uploadAssetsStore.updateItem(deviceAssetId, { message: $t('asset_hashing') });
@@ -138,7 +140,11 @@ async function fileUploader(assetFile: File, albumId?: string, replaceAssetId?:
           results: [checkUploadResult],
         } = await checkBulkUpload({ assetBulkUploadCheckDto: { assets: [{ id: assetFile.name, checksum }] } });
         if (checkUploadResult.action === Action.Reject && checkUploadResult.assetId) {
-          responseData = { status: AssetMediaStatus.Duplicate, id: checkUploadResult.assetId };
+          responseData = {
+            status: AssetMediaStatus.Duplicate,
+            id: checkUploadResult.assetId,
+            isTrashed: checkUploadResult.isTrashed,
+          };
         }
       } catch (error) {
         console.error(`Error calculating sha1 file=${assetFile.name})`, error);
@@ -185,6 +191,7 @@ async function fileUploader(assetFile: File, albumId?: string, replaceAssetId?:
     uploadAssetsStore.updateItem(deviceAssetId, {
       state: responseData.status === AssetMediaStatus.Duplicate ? UploadState.DUPLICATED : UploadState.DONE,
       assetId: responseData.id,
+      isTrashed: responseData.isTrashed,
     });
 
     if (responseData.status !== AssetMediaStatus.Duplicate) {