Upload other files then images to whiteboards

.gitignore

@@ -2,6 +2,7 @@
 \.idea/
 
 /build/
+/backup/
 /js/
 /dist/
 /css/

appinfo/info.xml

@@ -40,7 +40,7 @@ The official whiteboard app for Nextcloud. It allows users to create and share w
 	<screenshot>https://raw.githubusercontent.com/nextcloud/whiteboard/main/screenshots/screenshot1.png</screenshot>
 
 	<dependencies>
-		<nextcloud min-version="28" max-version="30"/>
+		<nextcloud min-version="28" max-version="31"/>
 	</dependencies>
 
 	<settings>

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/Listener/LoadViewerListener.php

@@ -37,5 +37,9 @@ public function handle(Event $event): void {
 			'collabBackendUrl',
 			$this->configService->getCollabBackendUrl()
 		);
+		$this->initialState->provideInitialState(
+			'maxFileSize',
+			$this->configService->getMaxFileSize()
+		);
 	}
 }

lib/Service/ConfigService.php

@@ -25,6 +25,14 @@ public function getJwtSecretKey(): string {
 		return $this->appConfig->getAppValueString('jwt_secret_key');
 	}
 
+	public function getMaxFileSize(): int {
+		return $this->appConfig->getAppValueInt('max_file_size', 10);
+	}
+
+	public function setMaxFileSize(int $maxFileSize): void {
+		$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/collaboration/collab.ts

@@ -9,6 +9,7 @@ import { Portal } from './Portal'
 import { restoreElements } from '@excalidraw/excalidraw'
 import { throttle } from 'lodash'
 import { hashElementsVersion, reconcileElements } from './util'
+import { registerFilesHandler } from '../files/files.ts'
 
 export class Collab {
 
@@ -28,6 +29,7 @@ export class Collab {
 		this.setViewModeEnabled = setViewModeEnabled
 
 		this.portal = new Portal(`${fileId}`, this, publicSharingToken)
+		registerFilesHandler(this.excalidrawAPI, this)
 	}
 
 	async startCollab() {

src/files/SideBarDownload.tsx

@@ -0,0 +1,113 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { createRoot } from 'react-dom'
+import { type JSX } from 'react'
+import { type Meta } from './files'
+import { mdiDownloadBox } from '@mdi/js'
+import { Icon } from '@mdi/react'
+
+/**
+ * renders the html button for file downloads
+ * @param meta file data
+ * @param onClick onClick callback
+ * @return {JSX.Element} rendered Button JSX
+ */
+function renderDownloadButton(meta: Meta, onClick: () => void): JSX.Element {
+	const iconUrl = window.OC.MimeType.getIconUrl(meta.type)
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				alignItems: 'center',
+				padding: '10px',
+			}}>
+			<img
+				src={iconUrl}
+				style={{
+					width: '50px',
+					height: '50px',
+					marginBottom: '10px',
+				}}
+			/>
+			<span
+				style={{
+					marginBottom: '5px',
+					textAlign: 'center',
+					fontWeight: 'bold',
+				}}>
+				{meta.name}
+			</span>
+			<button
+				onClick={onClick}
+				style={{ textAlign: 'center', fontWeight: 'bold' }}>
+				Download
+				<Icon
+					path={mdiDownloadBox}
+					size={1.5}
+					style={{ verticalAlign: 'middle' }}
+				/>
+			</button>
+		</div>
+	)
+}
+
+/**
+ * removes the download button from the sidebar
+ * makes all default excalidraw settings visible again
+ * @return {void}
+ */
+export function ResetDownloadButton() {
+	const sideBar = document.getElementsByClassName('App-menu__left')[0]
+	if (sideBar === undefined) {
+		return
+	}
+	const panelColumn = sideBar.querySelector('.panelColumn') as HTMLElement
+	if (panelColumn) {
+		panelColumn.style.display = ''
+	}
+	const downloadButton = document.getElementsByClassName('nc-download')[0]
+	if (downloadButton === undefined) {
+	 return
+	}
+	sideBar.removeChild(downloadButton)
+}
+
+/**
+ * clears the excalidraw sidebar as soon as it appears
+ * inserts a download button with the file name instead
+ * @param meta file data
+ * @param onClick onClick callback
+ */
+export function InsertDownloadButton(meta: Meta, onClick: () => void) {
+	const callback = () => {
+		const sideBar = document.getElementsByClassName('App-menu__left')[0]
+		if (sideBar === undefined) {
+			return
+		}
+		observer.disconnect()
+		const newElement = document.createElement('div')
+		newElement.classList.add('nc-download')
+		const root = createRoot(newElement)
+		root.render(renderDownloadButton(meta, onClick))
+
+		// hide all excalidraw settings
+		const panelColumn = sideBar.querySelector('.panelColumn') as HTMLElement
+		if (panelColumn) {
+			panelColumn.style.display = 'none'
+		}
+
+		sideBar.appendChild(newElement)
+	}
+
+	const observer = new MutationObserver(callback)
+
+	const sideBar = document.getElementsByClassName('App-menu__left')[0]
+	if (sideBar !== undefined) {
+		callback()
+	} else {
+		observer.observe(document.body, { childList: true, subtree: true })
+	}
+}