Use etag as cache buster

js/viewer-main.js.LICENSE.txt

@@ -90,6 +90,28 @@
  *
  */
 
+/**
+ * @copyright Copyright (c) 2021 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
 /**
  * @copyright Copyright (c) 2021 John Molakvoæ <skjnldsv@protonmail.com>
  *
@@ -112,6 +134,28 @@
  *
  */
 
+/**
+ * @copyright Copyright (c) 2022 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
 /**
 * @license nested-property https://github.com/cosmosio/nested-property
 *

package.json

@@ -46,6 +46,7 @@
     "@nextcloud/axios": "^2.3.0",
     "@nextcloud/dialogs": "^4.1.0",
     "@nextcloud/event-bus": "^3.1.0",
+    "@nextcloud/files": "^3.0.0-beta.10",
     "@nextcloud/initial-state": "^2.0.0",
     "@nextcloud/l10n": "^2.1.0",
     "@nextcloud/logger": "^2.5.0",
@@ -92,4 +93,4 @@
     "typescript": "^4.9.5",
     "wait-on": "^7.0.1"
   }
-}
+}

src/components/ImageEditor.vue

@@ -6,9 +6,11 @@ import { basename, dirname, extname, join } from 'path'
 import { emit } from '@nextcloud/event-bus'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
+import { Node } from '@nextcloud/files'
 
 import logger from '../services/logger.js'
 import translations from '../models/editorTranslations.js'
+import { rawStat } from '../services/FileInfo.js'
 
 let TABS, TOOLS
 
@@ -179,7 +181,20 @@ export default {
 					emit('files:node:created', { fileid: parseInt(response?.headers?.['oc-fileid']?.split('oc')[0]) || null })
 				} else {
 					this.$emit('updated')
-					emit('files:node:updated', { fileid: this.fileid })
+					const updatedFile = await rawStat(origin, decodeURI(pathname))
+
+					const node = new Node({
+						id: Number.parseInt(this.fileid),
+						source: this.src,
+						mtime: new Date(updatedFile.lastmod),
+						...updatedFile,
+						attributes: {
+							...updatedFile,
+							...updatedFile.props,
+						},
+					})
+
+					emit('files:node:updated', node)
 				}
 			} catch (error) {
 				logger.error('Error saving image', { error })

src/components/Images.vue

@@ -25,7 +25,6 @@
 		:mime="mime"
 		:src="src"
 		:fileid="fileid"
-		@updated="onUpdate"
 		@close="onClose" />
 
 	<img v-else-if="data !== null"
@@ -35,7 +34,7 @@
 			loaded,
 			zoomed: zoomRatio !== 1
 		}"
-		:src="`${data}${cacheBuster}`"
+		:src="data"
 		:style="{
 			marginTop: shiftY + 'px',
 			marginLeft: shiftX + 'px',
@@ -82,8 +81,6 @@
 			shiftY: 0,
 			zoomRatio: 1,
 			fallback: false,
-			cacheBuster: '',
-			cacheBusterCounter: 0,
 		}
 	},
 
@@ -162,7 +159,7 @@
 			return `data:${this.mime};base64,${btoa(file.data)}`
 		},
 
 		/**
 		 * Handle zooming
 		 *
 		 * @param {Event} event the scroll event
@@ -267,10 +264,6 @@
 				this.fallback = true
 			}
 		},
-
-		onUpdate() {
-			this.cacheBuster = `?buster=${this.cacheBusterCounter++}`
-		},
 	},
 }
 </script>

src/mixins/PreviewUrl.js

@@ -39,6 +39,7 @@ export default {
 				previewUrl: this.previewUrl,
 				hasPreview: this.hasPreview,
 				davPath: this.davPath,
+				etag: this.$attrs.etag,
 			})
 		},
 
@@ -65,9 +66,10 @@ export default {
 		 * @param {boolean} data.hasPreview have the file an existing preview ?
 		 * @param {string} data.davPath the absolute dav path
 		 * @param {string} data.filename the file name
+		 * @param {string|null} data.etag the etag of the file
 		 * @return {string} the absolute url
 		 */
-		getPreviewIfAny({ fileid, filename, previewUrl, hasPreview, davPath }) {
+		getPreviewIfAny({ fileid, filename, previewUrl, hasPreview, davPath, etag }) {
 			if (previewUrl) {
 				return previewUrl
 			}
@@ -76,6 +78,7 @@ export default {
 				+ `&x=${Math.floor(screen.width * devicePixelRatio)}`
 				+ `&y=${Math.floor(screen.height * devicePixelRatio)}`
 				+ '&a=true'
+				+ (etag !== null ? `&etag=${etag.replace(/"/g, '')}` : '')
 
 			if (hasPreview) {
 				// TODO: find a nicer standard way of doing this?

src/services/DavClient.js

@@ -25,7 +25,7 @@ import axios from '@nextcloud/axios'
 
 import { getRootPath, getToken, isPublic } from '../utils/davUtils.js'
 
-// Add this so the server knows it is an request from the browserg
+// Add this so the server knows it is an request from the browser
 axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
 
 // force our axios

src/services/FileInfo.js

@@ -22,41 +22,64 @@
 
 import client from './DavClient.js'
 import { genFileInfo } from '../utils/fileUtils.js'
+import { createClient } from 'webdav'
+
+const statData = `<?xml version="1.0"?>
+<d:propfind  xmlns:d="DAV:"
+	xmlns:oc="http://owncloud.org/ns"
+	xmlns:nc="http://nextcloud.org/ns"
+	xmlns:ocs="http://open-collaboration-services.org/ns">
+	<d:prop>
+		<d:getlastmodified />
+		<d:getcontenttype />
+		<d:resourcetype />
+		<d:getetag />
+		<oc:fileid />
+		<oc:permissions />
+		<oc:size />
+		<d:getcontentlength />
+		<nc:has-preview />
+		<nc:mount-type />
+		<nc:is-encrypted />
+		<ocs:share-permissions />
+		<oc:tags />
+		<oc:favorite />
+		<oc:comments-unread />
+		<oc:owner-id />
+		<oc:owner-display-name />
+		<oc:share-types />
+	</d:prop>
+</d:propfind>`
+
 /**
  * Retrieve the files list
  *
  * @param {string} path the path relative to the user root
  * @param {object} [options] optional options for axios
- * @return {Array} the file list
+ * @return {Promise<Array>} the file list
  */
 export default async function(path, options) {
 	const response = await client.stat(path, Object.assign({
-		data: `<?xml version="1.0"?>
-			<d:propfind  xmlns:d="DAV:"
-				xmlns:oc="http://owncloud.org/ns"
-				xmlns:nc="http://nextcloud.org/ns"
-				xmlns:ocs="http://open-collaboration-services.org/ns">
-				<d:prop>
-					<d:getlastmodified />
-					<d:getcontenttype />
-					<d:resourcetype />
-					<oc:fileid />
-					<oc:permissions />
-					<oc:size />
-					<d:getcontentlength />
-					<nc:has-preview />
-					<nc:mount-type />
-					<nc:is-encrypted />
-					<ocs:share-permissions />
-					<oc:tags />
-					<oc:favorite />
-					<oc:comments-unread />
-					<oc:owner-id />
-					<oc:owner-display-name />
-					<oc:share-types />
-				</d:prop>
-			</d:propfind>`,
+		data: statData,
 		details: true,
 	}, options))
 	return genFileInfo(response.data)
 }
+
+/**
+ * Retrieve the files list
+ *
+ * @param {string} origin
+ * @param {string} path the path relative to the user root
+ * @param {object} [options] optional options for axios
+ * @return {Promise<object>} the file list
+ */
+export async function rawStat(origin, path, options) {
+	const response = await createClient(origin).stat(path, {
+		...options,
+		data: statData,
+		details: true,
+	})
+
+	return response.data
+}

src/views/Viewer.vue

@@ -467,6 +467,7 @@ export default {
 		// React to Files' Sidebar events.
 		subscribe('files:sidebar:opened', this.handleAppSidebarOpen)
 		subscribe('files:sidebar:closed', this.handleAppSidebarClose)
+		subscribe('files:node:updated', this.handleFileUpdated)
 		subscribe('viewer:trapElements:changed', this.handleTrapElementsChange)
 		window.addEventListener('keydown', this.keyboardDeleteFile)
 		window.addEventListener('keydown', this.keyboardDownloadFile)
@@ -968,6 +969,16 @@ export default {
 			this.trapElements = []
 		},
 
+		// Update etag of updated file to break cache.
+		async handleFileUpdated(node) {
+			const index = this.fileList.findIndex(({ fileid: currentFileId }) => currentFileId === node.fileid)
+
+			this.fileList.splice(index, 1, { ...node, etag: node.etag })
+			if (node.fileid === this.currentFile.fileid) {
+				this.currentFile.etag = node.etag
+			}
+		},
+
 		onResize() {
 			const sidebar = document.querySelector('aside.app-sidebar')
 			if (sidebar) {