fix: open non-image attachment

Signed-off-by: Luka Trovic <luka@nextcloud.com>
nextcloud · Mar 27, 2023 · 0d1ccb5 · 0d1ccb5
1 parent 43ad16c
commit 0d1ccb5
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 30 deletions.
diff --git a/src/components/Editor/MediaHandler.vue b/src/components/Editor/MediaHandler.vue
@@ -186,7 +186,7 @@ export default {
 			const src = dirname + '/'
 				+ encodeURIComponent(name).replace(/[!'()*]/g, (c) => {
 					return '%' + c.charCodeAt(0).toString(16).toUpperCase()
-				})
+				}) + '?fileId=' + fileId + '&mimeType=' + encodeURIComponent(mimeType)
 			// simply get rid of brackets to make sure link text is valid
 			// as it does not need to be unique and matching the real file name
 			const alt = name.replaceAll(/[[\]]/g, '')

diff --git a/src/nodes/ImageView.vue b/src/nodes/ImageView.vue
@@ -34,17 +34,19 @@
 				<transition name="fade">
 					<template v-if="!failed">
 						<div v-if="isMediaAttachment"
-							class="media"
-							@click="handleImageClick(src)">
+							class="media">
 							<div class="media__wrapper">
-								<img v-show="loaded"
-									:src="imageUrl"
-									class="image__main"
-									@load="onLoaded">
-								<div class="metadata">
-									<span class="name">{{ alt }}</span>
-									<span class="size">{{ attachmentMetadata.size }}</span>
-								</div>
+								<a :href="internalLinkOrImage"
+									target="_blank">
+									<img v-show="loaded"
+										:src="imageUrl"
+										class="image__main"
+										@load="onLoaded">
+									<div class="metadata">
+										<span class="name">{{ alt }}</span>
+										<span class="size">{{ attachmentMetadata.size }}</span>
+									</div>
+								</a>
 							</div>
 							<div v-if="showDeleteIcon"
 								class="buttons">
@@ -215,26 +217,19 @@ export default {
 			return this.showDeleteIcon && !this.isMediaAttachment
 		},
 		canDisplayImage() {
-			if (!this.isSupportedImage) {
-				return false
-			}
-
 			if (this.failed && this.loaded) {
 				return true
 			}
 
 			return this.loaded && this.imageLoaded
 		},
-		imageFileId() {
-			return getQueryVariable(this.src, 'fileId')
-		},
 		isSupportedImage() {
-			return typeof this.mime === 'undefined'
-				|| IMAGE_MIMES.indexOf(this.mime) !== -1
+			return typeof this.mimeType === 'undefined'
+				|| IMAGE_MIMES.indexOf(this.mimeType) !== -1
 		},
 		internalLinkOrImage() {
-			if (this.imageFileId) {
-				return generateUrl('/f/' + this.imageFileId)
+			if (this.fileId) {
+				return generateUrl('/apps/files/f/' + this.fileId)
 			}
 			return this.src
 		},
@@ -258,6 +253,12 @@ export default {
 				})
 			},
 		},
+		fileId() {
+			return getQueryVariable(this.src, 'fileId')
+		},
+		mimeType() {
+			return getQueryVariable(this.src, 'mimeType')
+		},
 		t() {
 			return (a, s) => window.t(a, s)
 		},
@@ -267,14 +268,6 @@ export default {
 		},
 	},
 	beforeMount() {
-		if (!this.isSupportedImage) {
-			// TODO check if hasPreview and render a file preview if available
-			this.failed = true
-			this.imageLoaded = false
-			this.loaded = true
-			this.errorMessage = t('text', 'Unsupported image type')
-			return
-		}
 		this.init()
 			.catch(this.onImageLoadFailure)
 	},
@@ -464,6 +457,10 @@ export default {
 		border-radius: var(--border-radius-large);
 		padding: 8px;
 
+		a {
+			display: contents;
+		}
+
 		img {
 			width: 44px;
 			height: 44px;