From 9ce6de3100bb2e0db1354f08c00c45085bcbb9d0 Mon Sep 17 00:00:00 2001 From: Vito0912 <86927734+Vito0912@users.noreply.github.com> Date: Sat, 27 Sep 2025 17:00:57 +0200 Subject: [PATCH 1/2] Added progress to upload --- client/components/cards/ItemUploadCard.vue | 56 +++++++++++++++++++++- client/components/ui/LoadingIndicator.vue | 9 +++- client/pages/upload/index.vue | 23 ++++++++- 3 files changed, 83 insertions(+), 5 deletions(-) diff --git a/client/components/cards/ItemUploadCard.vue b/client/components/cards/ItemUploadCard.vue index 40836b8e4..cb9dd5589 100644 --- a/client/components/cards/ItemUploadCard.vue +++ b/client/components/cards/ItemUploadCard.vue @@ -62,7 +62,24 @@
- + +
+ + {{ nonInteractionLabel }} + +
+ +
+
+ + {{ uploadProgressText }} + +
+
+
+
+
+
@@ -91,7 +108,11 @@ export default { isUploading: false, uploadFailed: false, uploadSuccess: false, - isFetchingMetadata: false + isFetchingMetadata: false, + uploadProgress: { + loaded: 0, + total: 0 + } } }, computed: { @@ -116,13 +137,44 @@ export default { } else if (this.isFetchingMetadata) { return this.$strings.LabelFetchingMetadata } + }, + uploadProgressPercent() { + if (this.uploadProgress.total === 0) return 0 + return Math.min(100, Math.round((this.uploadProgress.loaded / this.uploadProgress.total) * 100)) + }, + uploadProgressText() { + const loaded = this.formatBytes(this.uploadProgress.loaded) + const total = this.formatBytes(this.uploadProgress.total) + return `${this.uploadProgressPercent}% (${loaded} / ${total})` } }, methods: { + formatBytes(bytes) { + if (bytes === 0) return '0 Bytes' + const k = 1024 + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'] + const i = Math.floor(Math.log(bytes) / Math.log(k)) + return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i] + }, setUploadStatus(status) { this.isUploading = status === 'uploading' this.uploadFailed = status === 'failed' this.uploadSuccess = status === 'success' + + if (status !== 'uploading') { + this.uploadProgress = { + loaded: 0, + total: 0 + } + } + }, + setUploadProgress(progress) { + if (this.isUploading && progress) { + this.uploadProgress = { + loaded: progress.loaded || 0, + total: progress.total || 0 + } + } }, titleUpdated() { this.error = '' diff --git a/client/components/ui/LoadingIndicator.vue b/client/components/ui/LoadingIndicator.vue index d984bf35e..3b4b6e049 100644 --- a/client/components/ui/LoadingIndicator.vue +++ b/client/components/ui/LoadingIndicator.vue @@ -1,5 +1,5 @@ @@ -23,6 +25,9 @@ export default { computed: { message() { return this.text || this.$strings.MessagePleaseWait + }, + hasSlotContent() { + return this.$slots.default && this.$slots.default.length > 0 } } } diff --git a/client/pages/upload/index.vue b/client/pages/upload/index.vue index eef05b608..63e133137 100644 --- a/client/pages/upload/index.vue +++ b/client/pages/upload/index.vue @@ -297,6 +297,15 @@ export default { ref.setUploadStatus(status) } }, + updateItemCardProgress(index, progress) { + var ref = this.$refs[`itemCard-${index}`] + if (ref && ref.length) ref = ref[0] + if (!ref) { + console.error('Book card ref not found', index, this.$refs) + } else { + ref.setUploadProgress(progress) + } + }, async uploadItem(item) { var form = new FormData() form.set('title', item.title) @@ -312,8 +321,20 @@ export default { form.set(`${index++}`, file) }) + const config = { + onUploadProgress: (progressEvent) => { + if (progressEvent.lengthComputable) { + const progress = { + loaded: progressEvent.loaded, + total: progressEvent.total + } + this.updateItemCardProgress(item.index, progress) + } + } + } + return this.$axios - .$post('/api/upload', form) + .$post('/api/upload', form, config) .then(() => true) .catch((error) => { console.error('Failed to upload item', error) From 4224f44259da03000a924c3ed382fa358909ecb1 Mon Sep 17 00:00:00 2001 From: Finn Dittmar Date: Thu, 9 Oct 2025 08:49:13 +0200 Subject: [PATCH 2/2] Remove duplicate (and also wrong byte conversion) --- client/components/cards/ItemUploadCard.vue | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/client/components/cards/ItemUploadCard.vue b/client/components/cards/ItemUploadCard.vue index cb9dd5589..adbf3adbe 100644 --- a/client/components/cards/ItemUploadCard.vue +++ b/client/components/cards/ItemUploadCard.vue @@ -143,19 +143,12 @@ export default { return Math.min(100, Math.round((this.uploadProgress.loaded / this.uploadProgress.total) * 100)) }, uploadProgressText() { - const loaded = this.formatBytes(this.uploadProgress.loaded) - const total = this.formatBytes(this.uploadProgress.total) + const loaded = this.$bytesPretty(this.uploadProgress.loaded) + const total = this.$bytesPretty(this.uploadProgress.total) return `${this.uploadProgressPercent}% (${loaded} / ${total})` } }, methods: { - formatBytes(bytes) { - if (bytes === 0) return '0 Bytes' - const k = 1024 - const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'] - const i = Math.floor(Math.log(bytes) / Math.log(k)) - return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i] - }, setUploadStatus(status) { this.isUploading = status === 'uploading' this.uploadFailed = status === 'failed'