Show previews in the upload editor

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue

@@ -26,7 +26,7 @@
 		class="file-preview"
 		:class="{ 'file-preview--viewer-available': isViewerAvailable, 'file-preview--upload-editor': isUploadEditor }"
 		@click="showPreview">
-		<img v-if="!isLoading && !failed"
+		<img v-if="(!isLoading && !failed) || hasTemporaryImageUrl"
 			:class="previewSizeClass"
 			alt=""
 			:src="previewUrl">
@@ -109,6 +109,12 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		// The link to the file for displaying it in the preview
+		localUrl: {
+			type: String,
+			default: '',
+		},
 	},
 	data() {
 		return {
@@ -138,13 +144,21 @@ export default {
 		defaultIconUrl() {
 			return imagePath('core', 'filetypes/file')
 		},
+
 		previewSizeClass() {
 			if (this.previewSize === 64) {
 				return 'preview-64'
 			}
 			return 'preview'
 		},
+
 		previewUrl() {
+			if (this.hasTemporaryImageUrl) {
+				if (this.localUrl) {
+					return this.localUrl
+				}
+			}
+
 			if (this.previewAvailable !== 'yes' || this.$store.getters.getUserId() === null) {
 				return OC.MimeType.getIconUrl(this.mimetype)
 			}
@@ -156,6 +170,7 @@ export default {
 				height: previewSize,
 			})
 		},
+
 		isViewerAvailable() {
 			if (!OCA.Viewer) {
 				return false
@@ -170,16 +185,19 @@ export default {
 
 			return false
 		},
+
 		internalAbsolutePath() {
 			if (this.path.startsWith('/')) {
 				return this.path
 			}
 
 			return '/' + this.path
 		},
+
 		isTemporaryUpload() {
 			return this.id.startsWith('temp') && this.index && this.uploadId
 		},
+
 		uploadProgress() {
 			if (this.isTemporaryUpload) {
 				if (this.$store.getters.uploadProgress(this.uploadId, this.index)) {
@@ -188,6 +206,10 @@ export default {
 			}
 			return 0
 		},
+
+		hasTemporaryImageUrl() {
+			return this.mimetype.startsWith('image/') && this.localUrl
+		},
 	},
 	mounted() {
 		const img = new Image()

src/store/fileUploadStore.js

@@ -200,8 +200,10 @@ const actions = {
 			commit('markFileAsInitialised', { uploadId, index })
 			// currentFile to be uploaded
 			const currentFile = state.uploads[uploadId].files[index].file
+			// Get localurl for previews
+			const localUrl = URL.createObjectURL(currentFile)
 			// Create temporary message for the file and add it to the message list
-			const temporaryMessage = createTemporaryMessage('{file}', token, uploadId, index, currentFile)
+			const temporaryMessage = createTemporaryMessage('{file}', token, uploadId, index, currentFile, localUrl)
 			// Add the temporary messages to the store
 			commit('setTemporaryMessageForFile', { uploadId, index, temporaryMessage })
 		}

src/utils/temporaryMessage.js

@@ -24,7 +24,7 @@ import store from '../store/index'
 import SHA1 from 'crypto-js/sha1'
 import Hex from 'crypto-js/enc-hex'
 
-const createTemporaryMessage = (text, token, uploadId, index, file) => {
+const createTemporaryMessage = (text, token, uploadId, index, file, localUrl) => {
 	const messageToBeReplied = store.getters.getMessageToBeReplied(token)
 	const date = new Date()
 	let tempId = 'temp-' + date.getTime()
@@ -39,6 +39,7 @@ const createTemporaryMessage = (text, token, uploadId, index, file) => {
 			'name': file.name,
 			index,
 			uploadId,
+			localUrl,
 		}
 	}
 	const message = Object.assign({}, {
@@ -54,6 +55,7 @@ const createTemporaryMessage = (text, token, uploadId, index, file) => {
 		token: token,
 		isReplyable: false,
 		referenceId: Hex.stringify(SHA1(tempId)),
+
 	})
 
 	if (store.getters.getActorType() === 'guests') {