Fixed upload asset to album in asset selection (#579)

* Fixed error uploading a file from album

* Fixed album selection mode show viewing asset stage

* Navigate back after uploading asset to album

server/apps/immich/src/api-v1/asset/asset.controller.ts

@@ -123,12 +123,12 @@ export class AssetController {
   }
 
   @Get('/thumbnail/:assetId')
-  @Header('Cache-Control', 'max-age=300')
   async getAssetThumbnail(
+    @Response({ passthrough: true }) res: Res,
     @Param('assetId') assetId: string,
     @Query(new ValidationPipe({ transform: true })) query: GetAssetThumbnailDto,
   ): Promise<any> {
-    return this.assetService.getAssetThumbnail(assetId, query);
+    return this.assetService.getAssetThumbnail(assetId, query, res);
   }
 
   @Get('/curated-objects')

server/apps/immich/src/api-v1/asset/asset.service.ts

@@ -165,7 +165,7 @@ export class AssetService {
     }
   }
 
-  public async getAssetThumbnail(assetId: string, query: GetAssetThumbnailDto) {
+  public async getAssetThumbnail(assetId: string, query: GetAssetThumbnailDto, res: Res) {
     let fileReadStream: ReadStream;
 
     const asset = await this.assetRepository.findOne({ where: { id: assetId } });
@@ -196,8 +196,10 @@ export class AssetService {
         }
       }
 
+      res.header('Cache-Control', 'max-age=300');
       return new StreamableFile(fileReadStream);
     } catch (e) {
+      res.header('Cache-Control', 'none');
       Logger.error(`Cannot create read stream for asset ${asset.id}`, 'getAssetThumbnail');
       throw new InternalServerErrorException(
         e,

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

@@ -209,7 +209,6 @@
 
 	const createAlbumHandler = async (event: CustomEvent) => {
 		const { assets }: { assets: AssetResponseDto[] } = event.detail;
-
 		try {
 			const { data } = await api.albumApi.addAssetsToAlbum(album.id, {
 				assetIds: assets.map((a) => a.id)
@@ -226,6 +225,22 @@
 		}
 	};
 
+	const assetUploadedToAlbumHandler = async (event: CustomEvent) => {
+		const { assetIds }: { assetIds: string[] } = event.detail;
+		try {
+			const { data } = await api.albumApi.addAssetsToAlbum(album.id, {
+				assetIds: assetIds
+			});
+			album = data;
+		} catch (e) {
+			console.error('Error [assetUploadedToAlbumHandler] ', e);
+			notificationController.show({
+				type: NotificationType.Error,
+				message: 'Error adding asset to album, check console for more details'
+			});
+		}
+	};
+
 	const addUserHandler = async (event: CustomEvent) => {
 		const { selectedUsers }: { selectedUsers: UserResponseDto[] } = event.detail;
 
@@ -480,6 +495,7 @@
 		assetsInAlbum={album.assets}
 		on:go-back={() => (isShowAssetSelection = false)}
 		on:create-album={createAlbumHandler}
+		on:asset-uploaded={assetUploadedToAlbumHandler}
 	/>
 {/if}
 

web/src/lib/components/album-page/asset-selection.svelte

@@ -39,20 +39,23 @@
 	$: {
 		if (uploadAssets.length == uploadAssetsCount) {
 			// Filter assets that are already in the album
-			const assetsToAdd = uploadAssets.filter(
+			const assetIds = uploadAssets.filter(
 				(asset) => !!asset && !assetsInAlbum.some((a) => a.id === asset)
 			);
 
 			// Add the just uploaded assets to the album
-			if (assetsToAdd.length) {
+			if (assetIds.length) {
-				dispatch('create-album', {
+				dispatch('asset-uploaded', {
-					assets: assetsToAdd
+					assetIds
 				});
 			}
 
 			// Clean up states.
 			albumUploadAssetStore.asset.set([]);
 			albumUploadAssetStore.count.set(9999);
+
+			assetInteractionStore.clearMultiselect();
+			dispatch('go-back');
 		}
 	}
 
@@ -99,6 +102,6 @@
 		</svelte:fragment>
 	</ControlAppBar>
 	<section class="pt-[100px] pl-[70px] grid h-screen bg-immich-bg">
-		<AssetGrid />
+		<AssetGrid isAlbumSelectionMode={true} />
 	</section>
 </section>

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -18,8 +18,7 @@
 	export let assets: AssetResponseDto[];
 	export let bucketDate: string;
 	export let bucketHeight: number;
-
+	export let isAlbumSelectionMode = false;
-	const dispatch = createEventDispatcher();
 
 	let isMouseOverGroup = false;
 	let actualBucketHeight: number;
@@ -41,6 +40,11 @@
 		assetsInDateGroup: AssetResponseDto[],
 		dateGroupTitle: string
 	) => {
+		if (isAlbumSelectionMode) {
+			assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle);
+			return;
+		}
+
 		if ($isMultiSelectStoreState) {
 			assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle);
 		} else {

web/src/lib/components/photos-page/asset-grid.svelte

@@ -16,6 +16,7 @@
 	let viewportHeight = 0;
 	let viewportWidth = 0;
 	let assetGridElement: HTMLElement;
+	export let isAlbumSelectionMode = false;
 
 	onMount(async () => {
 		const { data: assetCountByTimebucket } = await api.assetApi.getAssetCountByTimeBucket({
@@ -87,6 +88,7 @@
 					<div id={'bucket_' + bucket.bucketDate} style:height={bucket.bucketHeight + 'px'}>
 						{#if intersecting}
 							<AssetDateGroup
+								{isAlbumSelectionMode}
 								assets={bucket.assets}
 								bucketDate={bucket.bucketDate}
 								bucketHeight={bucket.bucketHeight}

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

@@ -5,7 +5,9 @@
 	import CloudUploadOutline from 'svelte-material-icons/CloudUploadOutline.svelte';
 	import WindowMinimize from 'svelte-material-icons/WindowMinimize.svelte';
 	import type { UploadAsset } from '$lib/models/upload-asset';
-	// import { getAssetsInfo } fro$lib/stores/assets.storeets';
+	import { goto } from '$app/navigation';
+	import { assetStore } from '$lib/stores/assets.store';
+	import { notificationController, NotificationType } from './notification/notification';
 	let showDetail = true;
 
 	let uploadLength = 0;
@@ -84,7 +86,10 @@
 		in:fade={{ duration: 250 }}
 		out:fade={{ duration: 250, delay: 1000 }}
 		on:outroend={() => {
-			// getAssetsInfo()
+			notificationController.show({
+				message: 'Upload success, refresh the page to see new upload assets',
+				type: NotificationType.Info
+			});
 		}}
 		class="absolute right-6 bottom-6 z-[10000]"
 	>

web/src/lib/stores/assets.store.ts

@@ -1,3 +1,4 @@
+import { TimeGroupEnum } from './../../api/open-api/api';
 import { writable, derived, readable } from 'svelte/store';
 import lodash from 'lodash-es';
 import _ from 'lodash';