Merge pull request #44062 from nextcloud/fix/preview-cancel

fix(files): properly reset preview component

apps/files/src/components/FileEntry/FileEntryPreview.vue

@@ -39,7 +39,7 @@
 			:class="{'files-list__row-icon-preview--loaded': backgroundFailed === false}"
 			loading="lazy"
 			:src="previewUrl"
-			@error="backgroundFailed = true"
+			@error="onBackgroundError"
 			@load="backgroundFailed = false">
 
 		<FileIcon v-else v-once />
@@ -219,12 +219,21 @@ export default Vue.extend({
 	},
 
 	methods: {
+		// Called from FileEntry
 		reset() {
-			if (this.backgroundFailed === true && this.$refs.previewImg) {
+			// Reset background state to cancel any ongoing requests
+			this.backgroundFailed = undefined
+			if (this.$refs.previewImg) {
 				this.$refs.previewImg.src = ''
 			}
-			// Reset background state
-			this.backgroundFailed = undefined
+		},
+
+		onBackgroundError(event) {
+			// Do not fail if we just reset the background
+			if (event.target?.src === '') {
+				return
+			}
+			this.backgroundFailed = true
 		},
 
 		t,

apps/files/src/components/FileEntryMixin.ts

@@ -177,8 +177,10 @@ export default defineComponent({
 		 * When the source changes, reset the preview
 		 * and fetch the new one.
 		 */
-		source() {
-			this.resetState()
+		source(a: Node, b: Node) {
+			if (a.source !== b.source) {
+				this.resetState()
+			}
 		},
 	},
 
@@ -191,7 +193,8 @@ export default defineComponent({
 			// Reset loading state
 			this.loading = ''
 
-			this.$refs.preview.reset()
+			// Reset the preview state
+			this.$refs?.preview?.reset?.()
 
 			// Close menu
 			this.openedMenu = false