feat: add progress bar

Signed-off-by: Vitor Mattos <[email protected]>

Author: vitormattos

src/Components/Request/RequestPicker.vue

@@ -34,6 +34,12 @@
 				{{ t('libresign', 'Upload') }}
 			</NcActionButton>
 		</NcActions>
+		<UploadProgress :is-uploading="isUploading"
+			:upload-progress="uploadProgress"
+			:uploaded-bytes="uploadedBytes"
+			:total-bytes="totalBytes"
+			:upload-start-time="uploadStartTime"
+			@cancel="cancelUpload" />
 		<FilePicker v-if="showFilePicker"
 			:name="t('libresign', 'Select your file')"
 			:multiselect="false"
@@ -90,6 +96,8 @@ import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 
+import UploadProgress from '../UploadProgress.vue'
+
 import { useActionsMenuStore } from '../../store/actionsmenu.js'
 import { useFilesStore } from '../../store/files.js'
 
@@ -109,6 +117,7 @@ export default {
 		NcTextField,
 		PlusIcon,
 		UploadIcon,
+		UploadProgress,
 	},
 	props: {
 		inline: {
@@ -133,6 +142,12 @@ export default {
 			loading: false,
 			openedMenu: false,
 			canRequestSign: loadState('libresign', 'can_request_sign', false),
+			uploadProgress: 0,
+			isUploading: false,
+			uploadAbortController: null,
+			uploadedBytes: 0,
+			totalBytes: 0,
+			uploadStartTime: null,
 		}
 	},
 	computed: {
@@ -186,28 +201,64 @@ export default {
 		},
 		async upload(files) {
 			this.loading = true
+			this.isUploading = true
+			this.uploadProgress = 0
+			this.uploadedBytes = 0
+			this.totalBytes = 0
+			this.uploadStartTime = Date.now()
 
 			const formData = new FormData()
 
 			if (files.length === 1) {
 				const name = files[0].name.replace(/\.pdf$/i, '')
 				formData.append('name', name)
 				formData.append('file', files[0])
+				this.totalBytes = files[0].size
 			} else {
 				formData.append('name', '')
+				let totalSize = 0
 				files.forEach((file) => {
 					formData.append('files[]', file)
+					totalSize += file.size
 				})
+				this.totalBytes = totalSize
 			}
 
-			await this.filesStore.upload(formData)
+			const abortController = new AbortController()
+			this.uploadAbortController = abortController
+
+			await this.filesStore.upload(formData, {
+				signal: abortController.signal,
+				onUploadProgress: (progressEvent) => {
+					if (progressEvent.total) {
+						this.uploadedBytes = progressEvent.loaded
+						this.uploadProgress = Math.round((progressEvent.loaded / progressEvent.total) * 100)
+					}
+				},
+			})
 				.then((nodeId) => {
 					this.filesStore.selectFile(nodeId)
 				})
-				.catch(({ response }) => {
-					showError(response.data.ocs.data.message)
+				.catch((error) => {
+					if (error.code === 'ERR_CANCELED') {
+						return
+					}
+					if (error.response?.data?.ocs?.data?.message) {
+						showError(error.response.data.ocs.data.message)
+					} else {
+						showError(t('libresign', 'Upload failed'))
+					}
 				})
-			this.loading = false
+				.finally(() => {
+					this.loading = false
+					this.isUploading = false
+					this.uploadAbortController = null
+				})
+		},
+		cancelUpload() {
+			if (this.uploadAbortController) {
+				this.uploadAbortController.abort()
+			}
 		},
 		uploadFile() {
 			this.openedMenu = false

src/Components/RightSidebar/EnvelopeFilesList.vue

@@ -20,6 +20,14 @@
 			<NcNoteCard v-if="errorMessage" type="error">
 				{{ errorMessage }}
 			</NcNoteCard>
+			<div v-if="isUploading" class="upload-progress-wrapper">
+				<UploadProgress :is-uploading="isUploading"
+					:upload-progress="uploadProgress"
+					:uploaded-bytes="uploadedBytes"
+					:total-bytes="totalBytes"
+					:upload-start-time="uploadStartTime"
+					@cancel="cancelUpload" />
+			</div>
 			<NcEmptyContent v-if="files.length === 0 && !isLoadingFiles"
 				:name="t('libresign', 'No files in envelope')"
 				:description="t('libresign', 'Add files to get started')">
@@ -117,6 +125,8 @@ import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcListItem from '@nextcloud/vue/components/NcListItem'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 
+import UploadProgress from '../UploadProgress.vue'
+
 import { SIGN_STATUS } from '../../domains/sign/enum.js'
 import { useFilesStore } from '../../store/files.js'
 
@@ -134,6 +144,7 @@ export default {
 		NcEmptyContent,
 		NcListItem,
 		NcNoteCard,
+		UploadProgress,
 	},
 	props: {
 		open: {
@@ -163,6 +174,12 @@ export default {
 				message: '',
 				action: null,
 			},
+			uploadProgress: 0,
+			isUploading: false,
+			uploadAbortController: null,
+			uploadedBytes: 0,
+			totalBytes: 0,
+			uploadStartTime: null,
 		}
 	},
 	computed: {
@@ -393,26 +410,56 @@ export default {
 				if (!files || files.length === 0) return
 
 				this.hasLoading = true
+				this.isUploading = true
+				this.uploadProgress = 0
+				this.uploadedBytes = 0
+				this.totalBytes = 0
+				this.uploadStartTime = Date.now()
+
 				const formData = new FormData()
+				let totalSize = 0
 
 				for (const file of files) {
 					formData.append('files[]', file)
+					totalSize += file.size
 				}
 
-				const result = await this.filesStore.addFilesToEnvelope(this.envelopeUuid, formData)
+				this.totalBytes = totalSize
+
+				const abortController = new AbortController()
+				this.uploadAbortController = abortController
+
+				const result = await this.filesStore.addFilesToEnvelope(this.envelopeUuid, formData, {
+					signal: abortController.signal,
+					onUploadProgress: (progressEvent) => {
+						if (progressEvent.total) {
+							this.uploadedBytes = progressEvent.loaded
+							this.uploadProgress = Math.round((progressEvent.loaded / progressEvent.total) * 100)
+						}
+					},
+				})
 
 				if (result.success) {
 					this.showSuccess(this.t('libresign', result.message))
 					this.files.push(...result.files)
 					this.totalFiles = result.filesCount
 				} else {
-					this.showError(this.t('libresign', result.message))
+					if (result.message !== 'Upload cancelled') {
+						this.showError(this.t('libresign', result.message))
+					}
 				}
 
 				this.hasLoading = false
+				this.isUploading = false
+				this.uploadAbortController = null
 			}
 			input.click()
 		},
+		cancelUpload() {
+			if (this.uploadAbortController) {
+				this.uploadAbortController.abort()
+			}
+		},
 		handleDelete(file) {
 			this.deleteDialogConfig = {
 				title: this.t('libresign', 'Delete'),
@@ -450,6 +497,14 @@ export default {
 	overflow-y: auto;
 }
 
+.upload-progress-wrapper {
+	display: flex;
+	justify-content: center;
+	padding: 16px 0;
+	margin-bottom: 16px;
+	border-bottom: 1px solid var(--color-border);
+}
+
 .files-list {
 	display: flex;
 	flex-direction: column;

src/Components/UploadProgress.vue

@@ -0,0 +1,126 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div v-if="isUploading" class="upload-picker-container">
+		<div class="upload-picker__progress">
+			<NcProgressBar :value="uploadProgress"
+				:error="false"
+				size="small"
+				aria-label="Upload progress" />
+			<p v-if="uploadEta">
+				<span :title="uploadEta">{{ uploadEta }}</span>
+			</p>
+		</div>
+		<NcButton class="upload-picker__cancel"
+			type="tertiary"
+			:aria-label="t('libresign', 'Cancel upload')"
+			@click="$emit('cancel')">
+			<template #icon>
+				<CancelIcon :size="20" />
+			</template>
+		</NcButton>
+	</div>
+</template>
+
+<script>
+import CancelIcon from 'vue-material-design-icons/Cancel.vue'
+
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcProgressBar from '@nextcloud/vue/components/NcProgressBar'
+
+export default {
+	name: 'UploadProgress',
+	components: {
+		CancelIcon,
+		NcButton,
+		NcProgressBar,
+	},
+	props: {
+		isUploading: {
+			type: Boolean,
+			required: true,
+		},
+		uploadProgress: {
+			type: Number,
+			default: 0,
+		},
+		uploadedBytes: {
+			type: Number,
+			default: 0,
+		},
+		totalBytes: {
+			type: Number,
+			default: 0,
+		},
+		uploadStartTime: {
+			type: Number,
+			default: null,
+		},
+	},
+	emits: ['cancel'],
+	computed: {
+		uploadEta() {
+			if (!this.isUploading || !this.uploadStartTime || this.uploadedBytes === 0) {
+				return ''
+			}
+
+			const elapsed = Date.now() - this.uploadStartTime
+			const rate = this.uploadedBytes / elapsed // bytes por ms
+			const remaining = this.totalBytes - this.uploadedBytes
+			const eta = remaining / rate // ms restantes
+
+			if (eta < 1000) {
+				return t('libresign', 'a few seconds left')
+			} else if (eta < 60000) {
+				const seconds = Math.ceil(eta / 1000)
+				return t('libresign', '{seconds} seconds left', { seconds })
+			} else {
+				const minutes = Math.ceil(eta / 60000)
+				return t('libresign', '{minutes} minutes left', { minutes })
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.upload-picker-container {
+	display: inline-flex;
+	align-items: center;
+	gap: 0;
+	height: var(--default-clickable-area);
+}
+
+.upload-picker__progress {
+	width: 200px;
+	max-width: 0;
+	transition: max-width var(--animation-quick) ease-in-out;
+	margin-top: 8px;
+
+	:deep(.progress-bar) {
+		height: 6px;
+	}
+
+	p {
+		margin: 0;
+		padding: 0;
+		font-size: 13px;
+		color: var(--color-text-maxcontrast);
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+
+		span {
+			display: inline-block;
+		}
+	}
+}
+
+.upload-picker-container .upload-picker__progress {
+	max-width: 200px;
+	margin-right: 20px;
+	margin-left: 8px;
+}
+</style>