[WEB] Upload asset directly to album (#379)

* Added stores to get album assetId

* Upload assets and add to album

* Added comments

* resolve conflict when add assets from upload directly

* Filtered out duplicate asset before adding to the album

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

@@ -9,6 +9,8 @@
 	import ImmichThumbnail from '../shared-components/immich-thumbnail.svelte';
 	import { AssetResponseDto } from '@api';
 	import AlbumAppBar from './album-app-bar.svelte';
+	import { openFileUploadDialog, UploadType } from '$lib/utils/file-uploader';
+	import { albumUploadAssetStore } from '$lib/stores/album-upload-asset';
 
 	const dispatch = createEventDispatcher();
 
@@ -19,7 +21,41 @@
 	let existingGroup: Set<number> = new Set();
 	let groupWithAssetsInAlbum: Record<number, Set<string>> = {};
 
-	onMount(() => scanForExistingSelectedGroup());
+	let uploadAssets: string[] = [];
+	let uploadAssetsCount = 9999;
+
+	onMount(() => {
+		scanForExistingSelectedGroup();
+
+		albumUploadAssetStore.asset.subscribe((uploadedAsset) => {
+			uploadAssets = uploadedAsset;
+		});
+
+		albumUploadAssetStore.count.subscribe((count) => {
+			uploadAssetsCount = count;
+		});
+	});
+
+	/**
+	 * Watch for the uploading event - when the uploaded assets are the same number of the chosen asset
+	 * navigate back and add them to the album
+	 */
+	$: {
+		if (uploadAssets.length == uploadAssetsCount) {
+			// Filter assets that are already in the album
+			const assetsToAdd = uploadAssets.filter(
+				(asset) => !assetsInAlbum.some((a) => a.id === asset)
+			);
+			// Add the just uploaded assets to the album
+			dispatch('create-album', {
+				assets: assetsToAdd
+			});
+
+			// Clean up states.
+			albumUploadAssetStore.asset.set([]);
+			albumUploadAssetStore.count.set(9999);
+		}
+	}
 
 	const selectAssetHandler = (assetId: string, groupIndex: number) => {
 		const tempSelectedAsset = new Set(selectedAsset);
@@ -146,6 +182,12 @@
 		</svelte:fragment>
 
 		<svelte:fragment slot="trailing">
+			<button
+				on:click={() => openFileUploadDialog(UploadType.ALBUM)}
+				class="text-immich-primary text-sm hover:bg-immich-primary/10 transition-all px-6 py-2 rounded-lg font-medium"
+			>
+				Select from computer
+			</button>
 			<button
 				disabled={selectedAsset.size === 0}
 				on:click={addSelectedAssets}

web/src/lib/stores/album-upload-asset.ts

@@ -0,0 +1,13 @@
+import { writable } from 'svelte/store';
+
+function createAlbumUploadStore() {
+	const albumUploadAsset = writable<Array<string>>([]);
+	const albumUploadAssetCount = writable<number>(9999);
+
+	return {
+		asset: albumUploadAsset,
+		count: albumUploadAssetCount
+	};
+}
+
+export const albumUploadAssetStore = createAlbumUploadStore();

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

@@ -3,9 +3,58 @@ import * as exifr from 'exifr';
 import { serverEndpoint } from '../constants';
 import { uploadAssetsStore } from '$lib/stores/upload';
 import type { UploadAsset } from '../models/upload-asset';
-import { api } from '@api';
+import { api, AssetFileUploadResponseDto } from '@api';
+import { albumUploadAssetStore } from '$lib/stores/album-upload-asset';
 
-export async function fileUploader(asset: File) {
+/**
+ * Determine if the upload is for album or for the user general backup
+ * @variant GENERAL - Upload assets to the server for general backup
+ * @variant ALBUM - Upload assets to the server for backup and add to the album
+ */
+export enum UploadType {
+	/**
+	 * Upload assets to the server
+	 */
+	GENERAL = 'GENERAL',
+
+	/**
+	 * Upload assets to the server and add to album
+	 */
+	ALBUM = 'ALBUM'
+}
+
+export const openFileUploadDialog = (uploadType: UploadType) => {
+	try {
+		let fileSelector = document.createElement('input');
+
+		fileSelector.type = 'file';
+		fileSelector.multiple = true;
+		fileSelector.accept = 'image/*,video/*,.heic,.heif';
+
+		fileSelector.onchange = async (e: any) => {
+			const files = Array.from<File>(e.target.files);
+
+			const acceptedFile = files.filter(
+				(e) => e.type.split('/')[0] === 'video' || e.type.split('/')[0] === 'image'
+			);
+
+			if (uploadType === UploadType.ALBUM) {
+				albumUploadAssetStore.asset.set([]);
+				albumUploadAssetStore.count.set(acceptedFile.length);
+			}
+
+			for (const asset of acceptedFile) {
+				await fileUploader(asset, uploadType);
+			}
+		};
+
+		fileSelector.click();
+	} catch (e) {
+		console.log('Error seelcting file', e);
+	}
+};
+
+async function fileUploader(asset: File, uploadType: UploadType) {
 	const assetType = asset.type.split('/')[0].toUpperCase();
 	const temp = asset.name.split('.');
 	const fileExtension = temp[temp.length - 1];
@@ -61,6 +110,11 @@ export async function fileUploader(asset: File) {
 
 		if (status === 200) {
 			if (data.isExist) {
+				if (uploadType === UploadType.ALBUM && data.id) {
+					albumUploadAssetStore.asset.update((a) => {
+						return [...a, data.id!];
+					});
+				}
 				return;
 			}
 		}
@@ -78,12 +132,26 @@ export async function fileUploader(asset: File) {
 			uploadAssetsStore.addNewUploadAsset(newUploadAsset);
 		};
 
-		request.upload.onload = () => {
+		request.upload.onload = (e) => {
 			setTimeout(() => {
 				uploadAssetsStore.removeUploadAsset(deviceAssetId);
 			}, 1000);
 		};
 
+		request.onreadystatechange = () => {
+			try {
+				if (request.readyState === 4 && uploadType === UploadType.ALBUM) {
+					const res: AssetFileUploadResponseDto = JSON.parse(request.response);
+
+					albumUploadAssetStore.asset.update((assets) => {
+						return [...assets, res.id];
+					});
+				}
+			} catch (e) {
+				console.error('ERROR parsing data JSON in upload onreadystatechange');
+			}
+		};
+
 		// listen for `error` event
 		request.upload.onerror = () => {
 			uploadAssetsStore.removeUploadAsset(deviceAssetId);