feat(upload): compress images eagerly

Assisted-by: ClaudeCode:claude-sonnet-5
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

Author: Antreesy

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

@@ -255,7 +255,9 @@ export default {
 				return ''
 			}
 
-			const size = this.uploadFile.totalSize
+			const size = this.uploadStore.skipCompression
+				? this.uploadFile.totalSize
+				: this.uploadStore.compressedFileSizes[this.referenceId] ?? this.uploadFile.totalSize
 			return size ? formatFileSize(size, true) : ''
 		},
 

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]
 			}
 		}
@@ -374,9 +380,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.
@@ -395,9 +442,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
@@ -407,7 +455,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])
 			}
@@ -449,6 +496,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 = {
@@ -823,6 +871,7 @@ export const useUploadStore = defineStore('upload', () => {
 		uploads,
 		currentUploadId,
 		localUrls,
+		compressedFileSizes,
 		allowUpdate,
 		skipCompression,