From 5ad2d620395542987529951919f17c3d48868f15 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Fri, 26 Aug 2022 09:39:28 -0700
Subject: [PATCH] Added limit on total of file upload on web (#535)

---
 .../notification/notification-card.svelte          |  8 ++++----
 .../notification/notification-list.svelte          | 12 +++++++++---
 .../shared-components/notification/notification.ts | 10 +++++-----
 web/src/lib/utils/file-uploader.ts                 | 14 +++++++++++++-
 web/src/routes/+page.ts                            |  1 -
 5 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/web/src/lib/components/shared-components/notification/notification-card.svelte b/web/src/lib/components/shared-components/notification/notification-card.svelte
index 5e4efba38a..77df40a65a 100644
--- a/web/src/lib/components/shared-components/notification/notification-card.svelte
+++ b/web/src/lib/components/shared-components/notification/notification-card.svelte
@@ -5,7 +5,7 @@
 
 	import {
 		ImmichNotification,
-		notificationList,
+		notificationController,
 		NotificationType
 	} from '$lib/components/shared-components/notification/notification';
 	import { onMount } from 'svelte';
@@ -50,8 +50,8 @@
 
 	onMount(() => {
 		setTimeout(() => {
-			notificationList.removeNotificationById(notificationInfo.id);
-		}, 2500);
+			notificationController.removeNotificationById(notificationInfo.id);
+		}, 3000);
 	});
 </script>
 
@@ -66,5 +66,5 @@
 		<h2 style:color={primaryColor()} class="font-medium">{notificationInfo.type.toString()}</h2>
 	</div>
 
-	<p class="text-sm pl-[28px] pr-[16px]">{notificationInfo.message} {notificationInfo.id}</p>
+	<p class="text-sm pl-[28px] pr-[16px]">{notificationInfo.message}</p>
 </div>
diff --git a/web/src/lib/components/shared-components/notification/notification-list.svelte b/web/src/lib/components/shared-components/notification/notification-list.svelte
index 6abc478efe..f3e0aa16e2 100644
--- a/web/src/lib/components/shared-components/notification/notification-list.svelte
+++ b/web/src/lib/components/shared-components/notification/notification-list.svelte
@@ -1,19 +1,25 @@
 <script lang="ts">
-	import { notificationList } from './notification';
+	import { ImmichNotification, notificationController } from './notification';
 	import { fade } from 'svelte/transition';
 
 	import NotificationCard from './notification-card.svelte';
 	import { flip } from 'svelte/animate';
 	import { quintOut } from 'svelte/easing';
+
+	let notificationList: ImmichNotification[] = [];
+
+	notificationController.notificationList.subscribe((list) => {
+		notificationList = list;
+	});
 </script>
 
-{#if $notificationList?.length > 0}
+{#if notificationList.length > 0}
 	<section
 		transition:fade={{ duration: 250 }}
 		id="notification-list"
 		class="absolute right-5 top-[80px] z-[99999999]"
 	>
-		{#each $notificationList as notificationInfo (notificationInfo.id)}
+		{#each notificationList as notificationInfo (notificationInfo.id)}
 			<div animate:flip={{ duration: 250, easing: quintOut }}>
 				<NotificationCard {notificationInfo} />
 			</div>
diff --git a/web/src/lib/components/shared-components/notification/notification.ts b/web/src/lib/components/shared-components/notification/notification.ts
index dba110ac4a..e7645cb62e 100644
--- a/web/src/lib/components/shared-components/notification/notification.ts
+++ b/web/src/lib/components/shared-components/notification/notification.ts
@@ -12,25 +12,25 @@ export class ImmichNotification {
 }
 
 function createNotificationList() {
-	const { set, update, subscribe } = writable<ImmichNotification[]>([]);
+	const notificationList = writable<ImmichNotification[]>([]);
 
 	const show = ({ message = '', type = NotificationType.Info }) => {
 		const notification = new ImmichNotification();
 		notification.message = message;
 		notification.type = type;
 
-		update((currentList) => [...currentList, notification]);
+		notificationList.update((currentList) => [...currentList, notification]);
 	};
 
 	const removeNotificationById = (id: number) => {
-		update((currentList) => currentList.filter((n) => n.id != id));
+		notificationList.update((currentList) => currentList.filter((n) => n.id != id));
 	};
 
 	return {
 		show,
 		removeNotificationById,
-		subscribe
+		notificationList
 	};
 }
 
-export const notificationList = createNotificationList();
+export const notificationController = createNotificationList();
diff --git a/web/src/lib/utils/file-uploader.ts b/web/src/lib/utils/file-uploader.ts
index af4b0a3a8c..4e75fe4e0d 100644
--- a/web/src/lib/utils/file-uploader.ts
+++ b/web/src/lib/utils/file-uploader.ts
@@ -1,10 +1,13 @@
+import {
+	notificationController,
+	NotificationType
+} from './../components/shared-components/notification/notification';
 /* @vite-ignore */
 import * as exifr from 'exifr';
 import { uploadAssetsStore } from '$lib/stores/upload';
 import type { UploadAsset } from '../models/upload-asset';
 import { api, AssetFileUploadResponseDto } from '@api';
 import { albumUploadAssetStore } from '$lib/stores/album-upload-asset';
-
 /**
  * Determine if the upload is for album or for the user general backup
  * @variant GENERAL - Upload assets to the server for general backup
@@ -33,6 +36,15 @@ export const openFileUploadDialog = (uploadType: UploadType) => {
 		fileSelector.onchange = async (e: any) => {
 			const files = Array.from<File>(e.target.files);
 
+			if (files.length > 50) {
+				notificationController.show({
+					message: `Cannot upload more than 50 files at a time - you are uploading ${files.length} files`,
+					type: NotificationType.Error
+				});
+
+				return;
+			}
+
 			const acceptedFile = files.filter(
 				(e) => e.type.split('/')[0] === 'video' || e.type.split('/')[0] === 'image'
 			);
diff --git a/web/src/routes/+page.ts b/web/src/routes/+page.ts
index 98dcbfe038..7739fd5f58 100644
--- a/web/src/routes/+page.ts
+++ b/web/src/routes/+page.ts
@@ -3,7 +3,6 @@ import { redirect } from '@sveltejs/kit';
 import { api } from '@api';
 import { browser } from '$app/env';
 import type { PageLoad } from './$types';
-import { goto } from '$app/navigation';
 
 export const load: PageLoad = async ({ parent }) => {
 	const { user } = await parent();