Merge pull request #3001 from nextcloud/save-file-before-download

feat: Save current state of a file before downloading it

Author: juliusknorr

viewer/README.md

@@ -175,7 +175,16 @@ If you want to make your app compatible with this app, you can use the methods p
         ],
 
         // your vue component view
-        component: VideoView
+        component: VideoView,
+
+        // optional: callback to be called before download
+        // useful for saving unsaved changes, validation, logging, etc.
+        // if not provided, defaults to an empty function
+        downloadCallback: async (fileInfo) => {
+            // perform any pre-download operations
+            // e.g., save current editor state
+            await saveCurrentDocument(fileInfo)
+        }
     })
    ```
 3. Make sure your script is loaded with `\OCP\Util::addInitScript` so that the handler is registered **before** the viewer is loaded.
@@ -213,7 +222,16 @@ If you want to make your app compatible with this app, you can use the `OCA.View
         ],
 
         // your vue component view
-        component: VideoView
+        component: VideoView,
+
+        // optional: callback to be called before download
+        // useful for saving unsaved changes, validation, logging, etc.
+        // if not provided, defaults to an empty function
+        downloadCallback: async (fileInfo) => {
+            // perform any pre-download operations
+            // e.g., save current editor state
+            await saveCurrentDocument(fileInfo)
+        }
     })
    ```
 3. Make sure your script is loaded with `\OCP\Util::addScript` (in contrast to using the API package)!

viewer/src/services/Viewer.js

@@ -18,6 +18,7 @@ import logger from './logger.js'
  * @property {string} group group identifier to combine for navigating to the next/previous files
  * @property {?string} theme viewer modal theme (one of 'dark', 'light', 'default')
  * @property {boolean} canCompare Indicate support for comparing two files
+ * @property {?Function} downloadCallback Optional callback to be called before download
  */
 
 /**
@@ -89,6 +90,11 @@ export default class Viewer {
 			return
 		}
 
+		// Set default empty function for downloadCallback if not provided
+		if (!handler.downloadCallback) {
+			handler.downloadCallback = () => {}
+		}
+
 		this._state.handlers.push(handler)
 		const handledMimes = [
 			...handler.mimes,

viewer/src/views/Viewer.vue

@@ -76,15 +76,14 @@
 				@click="showSidebar">
 				{{ t('viewer', 'Open sidebar') }}
 			</NcActionButton>
-			<NcActionLink v-if="canDownload"
-				:download="currentFile.basename"
+			<NcActionButton v-if="canDownload"
 				:close-after-click="true"
-				:href="downloadPath">
+				@click="onDownload">
 				<template #icon>
 					<Download :size="20" />
 				</template>
 				{{ t('viewer', 'Download') }}
-			</NcActionLink>
+			</NcActionButton>
 			<NcActionButton v-if="canDelete"
 				:close-after-click="true"
 				@click="onDelete">
@@ -1006,12 +1005,7 @@ export default defineComponent({
 			if (event.key === 's' && event.ctrlKey === true) {
 				event.preventDefault()
 				if (this.canDownload) {
-					const a = document.createElement('a')
-					a.href = this.currentFile.source ?? this.currentFile.davPath
-					a.download = this.currentFile.basename
-					document.body.appendChild(a)
-					a.click()
-					document.body.removeChild(a)
+					this.onDownload()
 				}
 			}
 		},
@@ -1196,6 +1190,43 @@ export default defineComponent({
 			this.toggleEditor(true)
 		},
 
+		/**
+		 * Call handler's downloadCallback before downloading
+		 */
+		async onDownload() {
+			if (!this.canDownload) {
+				return
+			}
+
+			// Get the current handler for this file
+			const mime = this.currentFile.mime
+			const alias = mime?.split('/')[0]
+			const handler = this.registeredHandlers[mime] ?? this.registeredHandlers[alias]
+
+			if (handler?.downloadCallback && typeof handler.downloadCallback === 'function') {
+				try {
+					logger.debug('Calling handler downloadCallback before download')
+					await handler.downloadCallback(this.currentFile)
+				} catch (error) {
+					logger.error('Failed to execute downloadCallback', { error })
+					showError(t('viewer', 'Failed to save file before download'))
+					return
+				}
+			}
+
+			this.performDownload()
+		},
+
+		performDownload() {
+			logger.debug('Performing download', { file: this.currentFile })
+			const a = document.createElement('a')
+			a.href = this.currentFile.source ?? this.currentFile.davPath
+			a.download = this.currentFile.basename
+			document.body.appendChild(a)
+			a.click()
+			document.body.removeChild(a)
+		},
+
 		handleTrapElementsChange(element) {
 			this.trapElements.push(element)
 		},