feat(upload): show file size on upload

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

@@ -62,6 +62,12 @@
 						class="file-preview__progress"
 						type="circular"
 						:value="uploadProgress" />
+					<span
+						v-if="fileSizeLabel"
+						class="file-preview__size"
+						data-theme-dark>
+						{{ fileSizeLabel }}
+					</span>
 				</template>
 				<TransitionWrapper v-else-if="isLoading" name="fade">
 					<canvas
@@ -94,6 +100,7 @@
 </template>
 
 <script>
+import { formatFileSize } from '@nextcloud/files'
 import { t } from '@nextcloud/l10n'
 import { encodePath } from '@nextcloud/paths'
 import { generateRemoteUrl, generateUrl, imagePath } from '@nextcloud/router'
@@ -243,6 +250,17 @@ export default {
 			return this.file.name
 		},
 
+		fileSizeLabel() {
+			if (!this.isUploadEditor || !this.uploadFile) {
+				return ''
+			}
+
+			const size = this.uploadStore.skipCompression
+				? this.uploadFile.totalSize
+				: this.uploadStore.compressedFileSizes[this.referenceId] ?? this.uploadFile.totalSize
+			return size ? formatFileSize(size, true) : ''
+		},
+
 		fallbackLocalUrl() {
 			return this.uploadStore.getLocalUrl(this.referenceId)
 		},
@@ -636,6 +654,19 @@ export default {
 		transform: translateY(-50%);
 	}
 
+	&__size {
+		position: absolute;
+		inset-block-end: var(--default-grid-baseline);
+		inset-inline-end: var(--default-grid-baseline);
+		padding: calc(0.5 * var(--default-grid-baseline)) var(--default-grid-baseline);
+		border-radius: var(--border-radius);
+		background-color: rgba(var(--color-main-background-rgb), 0.7);
+		color: var(--color-main-text);
+		font-size: var(--font-size-small);
+		line-height: 1;
+		z-index: 1;
+	}
+
 	.mimeicon {
 		min-height: 128px;
 	}

src/components/NewMessage/NewMessageUploadEditor.vue

@@ -94,6 +94,7 @@
 				:token="token"
 				isUploadEditor
 				:file="file[1].temporaryMessage.messageParameters.file"
+				:referenceId="file[1].temporaryMessage.referenceId"
 				@removeFile="removeFile" />
 		</TransitionWrapper>
 		<div v-else class="upload-editor__voice-message">

src/stores/__tests__/upload.spec.js

@@ -608,13 +608,14 @@ describe('fileUploadStore', () => {
 				getTalkConfig.mockReturnValue(true)
 			})
 
-			test('does not compress anything when not requested', async () => {
+			test('starts eager compression on upload', async () => {
 				const file = makeImage()
+				compressImage.mockResolvedValue(makeCompressed())
 				uploadStore.initialiseUpload({ uploadId: 'upload-id1', token: TOKEN, files: [file] })
 
 				await uploadStore.uploadFiles({ token: TOKEN, uploadId: 'upload-id1', options: null })
 
-				expect(compressImage).not.toHaveBeenCalled()
+				expect(compressImage).toHaveBeenCalled()
 				expect(uploadMock).toHaveBeenCalledWith(expect.anything(), file)
 			})
 

src/stores/upload.ts

@@ -85,6 +85,8 @@ export const useUploadStore = defineStore('upload', () => {
 	const uploads = reactive<UploadsState>({})
 	const currentUploadId = ref<string | undefined>(undefined)
 	const localUrls = reactive<Record<string, string>>({})
+	const compressionJobs: Record<string, Promise<File | null> | undefined> = {}
+	const compressedFileSizes = reactive<Record<string, number>>({})
 
 	/**
 	 * The user's choices for the current upload. They are only valid until it
@@ -168,7 +170,7 @@ export const useUploadStore = defineStore('upload', () => {
 	/**
 	 * Returns the local URL of uploaded image
 	 *
-	 * @param referenceId
+	 * @param referenceId the temporary message's reference id
 	 */
 	function getLocalUrl(referenceId: string): string | undefined {
 		return localUrls[referenceId]
@@ -213,6 +215,9 @@ export const useUploadStore = defineStore('upload', () => {
 		if (localUrl) {
 			localUrls[temporaryMessage.referenceId] = localUrl
 		}
+		if (supportImageCompression(file.type) && file.size > 0) {
+			void initCompressImage(temporaryMessage.referenceId, file)
+		}
 	}
 
 	/**
@@ -306,6 +311,7 @@ export const useUploadStore = defineStore('upload', () => {
 		const uploadId = currentUploadId.value!
 		for (const index in uploads[uploadId].files) {
 			if (uploads[uploadId].files[index].temporaryMessage!.id === temporaryMessageId) {
+				dismissCompressImage(uploads[uploadId].files[index].temporaryMessage!.referenceId)
 				delete uploads[uploadId].files[index]
 			}
 		}
@@ -378,9 +384,50 @@ export const useUploadStore = defineStore('upload', () => {
 		}
 		EventBus.emit('upload-discard')
 
+		for (const [_index, uploadedFile] of getUploadsArray(uploadId)) {
+			dismissCompressImage(uploadedFile.temporaryMessage.referenceId)
+		}
+
 		delete uploads[uploadId]
 	}
 
+	/**
+	 * Compresses a staged image eagerly, exposing resulting preview size.
+	 * The job output is kept, so compressUploadedImage() can reuse it.
+	 * Starts a job only once per file, and returns the pending or finished one.
+	 *
+	 * @param referenceId the temporary message's reference id
+	 * @param file the staged file
+	 */
+	function initCompressImage(referenceId: string, file: File): Promise<File | null> {
+		const startedJob = compressionJobs[referenceId]
+		if (startedJob) {
+			return startedJob
+		}
+		const newJob = async () => {
+			try {
+				const compressed = await compressImage(file)
+				compressedFileSizes[referenceId] = compressed?.size ?? file.size
+				return compressed
+			} catch (error) {
+				console.error('Failed to compress image, uploading original: ', error)
+				return null
+			}
+		}
+		compressionJobs[referenceId] = newJob()
+		return compressionJobs[referenceId]
+	}
+
+	/**
+	 * Drops the job and size preview, release resources
+	 *
+	 * @param referenceId the temporary message's reference id
+	 */
+	function dismissCompressImage(referenceId: string) {
+		delete compressionJobs[referenceId]
+		delete compressedFileSizes[referenceId]
+	}
+
 	/**
 	 * Re-encodes an initialised image upload in place, replacing the staged file
 	 * and its local preview URL.
@@ -399,9 +446,10 @@ export const useUploadStore = defineStore('upload', () => {
 			return null
 		}
 
+		const referenceId = uploadedFile.temporaryMessage.referenceId
 		try {
 			// @ts-expect-error: UploadFile.file is a custom type, not a File
-			const compressed = await compressImage(currentFile)
+			const compressed = await initCompressImage(referenceId, currentFile)
 			if (!compressed) {
 				// Compression was not beneficial, the original file is kept
 				return null
@@ -411,7 +459,6 @@ export const useUploadStore = defineStore('upload', () => {
 			uploads[uploadId].files[index].file = compressed
 			uploads[uploadId].files[index].totalSize = compressed.size
 
-			const referenceId = uploadedFile.temporaryMessage.referenceId
 			if (localUrls[referenceId]) {
 				URL.revokeObjectURL(localUrls[referenceId])
 			}
@@ -453,6 +500,7 @@ export const useUploadStore = defineStore('upload', () => {
 			const compressed = compressImages
 				? await compressUploadedImage(uploadId, index)
 				: null
+			dismissCompressImage(uploadedFile.temporaryMessage.referenceId)
 
 			// Store the previously created temporary message
 			const message = {
@@ -827,6 +875,7 @@ export const useUploadStore = defineStore('upload', () => {
 		uploads,
 		currentUploadId,
 		localUrls,
+		compressedFileSizes,
 		allowUpdate,
 		skipCompression,