From 57fbe3d3e9502c8b9b29617cd63aaccea8cf4bb8 Mon Sep 17 00:00:00 2001
From: Maximilian Mader <max@bastelstu.be>
Date: Thu, 4 Feb 2021 22:45:02 +0100
Subject: [PATCH] Add preview for non-images in attachment dialog

---
 .../Bastelstu.be/Chat/Ui/Attachment/Upload.js | 52 +++++++++++--------
 1 file changed, 31 insertions(+), 21 deletions(-)

diff --git a/files_wcf/js/Bastelstu.be/Chat/Ui/Attachment/Upload.js b/files_wcf/js/Bastelstu.be/Chat/Ui/Attachment/Upload.js
index e9d929b..75dbbc1 100644
--- a/files_wcf/js/Bastelstu.be/Chat/Ui/Attachment/Upload.js
+++ b/files_wcf/js/Bastelstu.be/Chat/Ui/Attachment/Upload.js
@@ -48,7 +48,6 @@ define([
 
 			super(buttonContainerId, previewContainerId, {
 				className: 'wcf\\data\\attachment\\AttachmentAction',
-				acceptableFiles: ['.png', '.gif', '.jpg', '.jpeg'],
 			})
 
 			this.input = input
@@ -209,8 +208,11 @@ define([
 		 * @see	WoltLabSuite/Core/Upload#_success
 		 */
 		_success(uploadId, data, responseText, xhr, requestOptions) {
-			if (data.returnValues.errors && data.returnValues.errors[0]) {
-				const error = data.returnValues.errors[0]
+			const target = this._fileElements[uploadId][0]
+			const progress = target.querySelector(':scope > progress')
+
+			if (data.returnValues.errors && data.returnValues.errors[uploadId]) {
+				const error = data.returnValues.errors[uploadId]
 
 				elInnerError(
 					this._button,
@@ -219,6 +221,8 @@ define([
 					})
 				)
 
+				progress.remove()
+
 				return
 			} else {
 				elInnerError(this._button, '')
@@ -237,31 +241,37 @@ define([
 				elHide(this.uploadDescription)
 
 				const attachment = data.returnValues.attachments[uploadId]
-				const url =
-					attachment.thumbnailURL || attachment.tinyURL || attachment.url
 
-				if (!url) {
-					throw new Error('Missing image URL')
-				}
+				if (attachment.isImage) {
+					const url =
+						attachment.thumbnailURL || attachment.tinyURL || attachment.url
 
-				const target = this._fileElements[uploadId][0]
-				const progress = target.querySelector(':scope > progress')
+					if (!url) {
+						throw new Error('Missing image URL')
+					}
 
-				const img = document.createElement('img')
-				img.setAttribute('src', url)
-				img.setAttribute('alt', '')
+					const img = document.createElement('img')
+					img.setAttribute('src', url)
+					img.setAttribute('alt', '')
 
-				if (url === attachment.tinyURL) {
-					img.classList.add('attachmentTinyThumbnail')
+					if (url === attachment.tinyURL) {
+						img.classList.add('attachmentTinyThumbnail')
+					} else {
+						img.classList.add('attachmentThumbnail')
+					}
+
+					img.dataset.width = attachment.width
+					img.dataset.height = attachment.height
+
+					DomUtil.replaceElement(progress, img)
 				} else {
-					img.classList.add('attachmentThumbnail')
+					const anchor = document.createElement('a')
+					anchor.setAttribute('href', attachment.url)
+					anchor.innerText = attachment.filename
+
+					DomUtil.replaceElement(progress, anchor)
 				}
 
-				img.dataset.width = attachment.width
-				img.dataset.height = attachment.height
-
-				DomUtil.replaceElement(progress, img)
-
 				this.createButtons(uploadId, attachment.attachmentID, this.tmpHash)
 
 				Dialog.rebuild(DIALOG_CONTAINER_ID)