add file size check to dropped files

Signed-off-by: grnd-alt <[email protected]>

lib/Controller/SettingsController.php

@@ -35,6 +35,7 @@ public function update(): DataResponse {
 		try {
 			$serverUrl = $this->request->getParam('serverUrl');
 			$secret = $this->request->getParam('secret');
+			$maxFileSize = $this->request->getParam('maxFileSize');
 
 			if ($serverUrl !== null) {
 				$this->configService->setCollabBackendUrl($serverUrl);
@@ -44,6 +45,10 @@ public function update(): DataResponse {
 				$this->configService->setWhiteboardSharedSecret($secret);
 			}
 
+			if ($maxFileSize !== null)  {
+				$this->configService->setMaxFileSize(intval($maxFileSize));
+			}
+
 			return new DataResponse([
 				'jwt' => $this->jwtService->generateJWTFromPayload([ 'serverUrl' => $serverUrl ])
 			]);

lib/Service/ConfigService.php

@@ -25,6 +25,21 @@ public function getJwtSecretKey(): string {
 		return $this->appConfig->getAppValueString('jwt_secret_key');
 	}
 
+	public function getMaxFileSize(): int {
+		if (!method_exists($this->appConfig, 'getAppValueInt')) {
+			return $this->appConfig->getAppValue('max_file_size');
+		}
+		return $this->appConfig->getAppValueInt('max_file_size');
+	}
+
+	public function setMaxFileSize(int $maxFileSize): void {
+		if (!method_exists($this->appConfig, 'setAppValueInt')) {
+			$this->appConfig->setAppValue('max_file_size', $maxFileSize);
+			return;
+		}
+		$this->appConfig->setAppValueInt('max_file_size', $maxFileSize);
+	}
+
 	public function getCollabBackendUrl(): string {
 		if (!method_exists($this->appConfig, 'getAppValueString')) {
 			return $this->appConfig->getAppValue('collabBackendUrl');

lib/Settings/Admin.php

@@ -25,6 +25,7 @@ public function getForm(): TemplateResponse {
 		$this->initialState->provideInitialState('url', $this->configService->getCollabBackendUrl());
 		$this->initialState->provideInitialState('secret', $this->configService->getWhiteboardSharedSecret());
 		$this->initialState->provideInitialState('jwt', $this->jwtService->generateJWTFromPayload([]));
+		$this->initialState->provideInitialState('maxFileSize', $this->configService->getMaxFileSize());
 		$response = new TemplateResponse(
 			'whiteboard',
 			'admin',

src/files/SideBarDownload.tsx

@@ -69,6 +69,9 @@ export function ResetDownloadButton() {
 		panelColumn.style.display = ''
 	}
 	const downloadButton = document.getElementsByClassName('nc-download')[0]
+	if (downloadButton === undefined) {
+	 return
+	}
 	sideBar.removeChild(downloadButton)
 }
 

src/files/files.ts

@@ -15,6 +15,7 @@ import { Collab } from '../collaboration/collab'
 import type { FileId } from '@excalidraw/excalidraw/types/element/types'
 import axios from '@nextcloud/axios'
 import { InsertDownloadButton, ResetDownloadButton } from './SideBarDownload'
+import { loadState } from '@nextcloud/initial-state'
 
 export type Meta = {
 	name: string
@@ -50,8 +51,8 @@ export class FileHandle {
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 		this.excalidrawApi.onPointerDown(async (activeTool, state, event) => {
 			const clickedElement = state.hit.element
+			ResetDownloadButton()
 			if (!clickedElement || !clickedElement.customData) {
-				ResetDownloadButton()
 				return
 			}
 			InsertDownloadButton(clickedElement.customData.meta, () =>
@@ -77,6 +78,13 @@ export class FileHandle {
 	}
 
 	private handleFileInsert(file: File, ev: Event) {
+	  const maxFileSize = loadState('whiteboard', 'maxFileSize', 11)
+		if (file.size > maxFileSize * 1024 * 1024) {
+			ev.stopImmediatePropagation()
+			this.excalidrawApi.setToast({ message: `Max file size is: ${maxFileSize} MB`, closable: true, duration: 5000 })
+			return
+		}
+
 		// if excalidraw can handle it, do nothing
 		if (this.types.includes(file.type)) {
 			return
@@ -123,8 +131,9 @@ export class FileHandle {
 							id: `filetype-icon-${mimeType}` as FileId,
 							dataURL: reader.result as DataURL,
 						}
-						this.collab.portal.sendImageFiles({ [file.id]: file })
-						resolve(file.id)
+						this.collab.portal.sendImageFiles({ [file.id]: file }).then(() => {
+							resolve(file.id)
+						})
 					}
 				}
 				reader.readAsDataURL(blob)
@@ -144,9 +153,6 @@ export class FileHandle {
 			this.excalidrawApi.getAppState(),
 		)
 		const iconId = await this.getMimeIcon(meta.type)
-		this.collab.portal.sendImageFiles({
-			[constructedFile.id]: constructedFile,
-		})
 		const elements = this.excalidrawApi
 			.getSceneElementsIncludingDeleted()
 			.slice()
@@ -193,7 +199,6 @@ export class FileHandle {
 			},
 			{
 				type: 'text',
-				customData: { meta },
 				isDeleted: false,
 				fillStyle: 'solid',
 				strokeWidth: 1,

src/settings/Settings.vue

@@ -33,6 +33,10 @@
 				<NcTextField :label="t('whiteboard', 'Shared secret')"
 					:value.sync="secret" />
 			</p>
+			<p>
+				<NcTextField :label="t('whiteboard', 'Max file size')"
+					:value.sync="maxFileSize" />
+			</p>
 			<p>
 				<NcButton type="submit"
 					:disabled="!serverUrl"
@@ -65,6 +69,7 @@ export default {
 		return {
 			serverUrl: loadState('whiteboard', 'url', ''),
 			secret: loadState('whiteboard', 'secret', ''),
+			maxFileSize: loadState('whiteboard', 'maxFileSize', 10),
 			validConnection: undefined,
 			connectionError: undefined,
 		}
@@ -77,6 +82,7 @@ export default {
 			const { data } = await axios.post(generateUrl('/apps/whiteboard/settings'), {
 				serverUrl: this.serverUrl,
 				secret: this.secret,
+				maxFileSize: this.maxFileSize,
 			})
 			await this.verifyConnection(data)
 		},