Merge pull request #1652 from nextcloud/enh/attachmentProgressIndicator

Progress indicator for attachment uploads

src/components/AttachmentDragAndDrop.vue

@@ -102,18 +102,15 @@ export default {
 		},
 	},
 	methods: {
-		dragEnter() {
-
-		},
-		dragLeave() {
-
-		},
 		handleDropFiles(event) {
 			this.isDraggingOver = false
 			if (this.isReadOnly) {
 				return
 			}
-			this.onLocalAttachmentSelected(event.dataTransfer.files[0])
+			const files = event.dataTransfer.files
+			for (const file of files) {
+				this.onLocalAttachmentSelected(file)
+			}
 			event.dataTransfer.value = ''
 		},
 	},

src/components/card/CardSidebarTabAttachments.vue

@@ -28,13 +28,24 @@
 		<input ref="localAttachments"
 			type="file"
 			style="display: none;"
+			multiple
 			@change="handleUploadFile">
 		<div class="attachment-list">
 			<ul>
+				<li v-for="attachment in uploadQueue" :key="attachment.name" class="attachment">
+					<a class="fileicon" :style="mimetypeForAttachment('none')" />
+					<div class="details">
+						<a>
+							<div class="filename">
+								<span class="basename">{{ attachment.name }}</span>
+							</div>
+							<progress :value="attachment.progress" max="100" />
+						</a>
+					</div>
+				</li>
 				<li v-for="attachment in attachments"
 					:key="attachment.id"
-					class="attachment"
-					style="display: flex;">
+					class="attachment">
 					<a class="fileicon" :style="mimetypeForAttachment(attachment.extendedData.mimetype)" :href="attachmentUrl(attachment)" />
 					<div class="details">
 						<a :href="attachmentUrl(attachment)" target="_blank">
@@ -109,7 +120,7 @@ export default {
 			}
 		},
 		attachments() {
-			return this.$store.getters.attachmentsByCard(this.card.id)
+			return [...this.$store.getters.attachmentsByCard(this.card.id)].sort((a, b) => b.id - a.id)
 		},
 		formattedFileSize() {
 			return (filesize) => formatFileSize(filesize)
@@ -134,22 +145,11 @@ export default {
 		this.$store.dispatch('fetchAttachments', this.card.id)
 	},
 	methods: {
-		dragEnter() {
-
-		},
-		dragLeave() {
-
-		},
-		handleDropFiles(event) {
-			this.isDraggingOver = false
-			if (this.isReadOnly) {
-				return
-			}
-			this.onLocalAttachmentSelected(event.dataTransfer.files[0])
-			event.dataTransfer.value = ''
-		},
 		handleUploadFile(event) {
-			this.onLocalAttachmentSelected(event.target.files[0])
+			const files = event.target.files ?? []
+			for (const file of files) {
+				this.onLocalAttachmentSelected(file)
+			}
 			event.target.value = ''
 		},
 		clickAddNewAttachmment() {
@@ -214,6 +214,7 @@ export default {
 		li.attachment {
 			display: flex;
 			padding: 3px;
+			min-height: 44px;
 
 			&.deleted {
 				opacity: .5;

src/mixins/attachmentUpload.js

@@ -21,8 +21,16 @@
  */
 import { showError } from '@nextcloud/dialogs'
 import { formatFileSize } from '@nextcloud/files'
+import PQueue from 'p-queue'
+
+const queue = new PQueue({ concurrency: 2 })
 
 export default {
+	data() {
+		return {
+			uploadQueue: {},
+		}
+	},
 	methods: {
 		async onLocalAttachmentSelected(file) {
 			if (this.maxUploadSize > 0 && file.size > this.maxUploadSize) {
@@ -34,20 +42,32 @@ export default {
 				return
 			}
 
+			this.$set(this.uploadQueue, file.name, { name: file.name, progress: 0 })
 			const bodyFormData = new FormData()
 			bodyFormData.append('cardId', this.cardId)
 			bodyFormData.append('type', 'deck_file')
 			bodyFormData.append('file', file)
-			try {
-				await this.$store.dispatch('createAttachment', { cardId: this.cardId, formData: bodyFormData })
-			} catch (err) {
-				if (err.response.data.status === 409) {
-					this.overwriteAttachment = err.response.data.data
-					this.modalShow = true
-				} else {
-					showError(err.response.data.message)
+			await queue.add(async() => {
+				try {
+					await this.$store.dispatch('createAttachment', { cardId: this.cardId,
+						formData: bodyFormData,
+						onUploadProgress: (e) => {
+							const percentCompleted = Math.round((e.loaded * 100) / e.total)
+							console.debug(percentCompleted)
+							this.$set(this.uploadQueue[file.name], 'progress', percentCompleted)
+						},
+					})
+				} catch (err) {
+					if (err.response.data.status === 409) {
+						this.overwriteAttachment = err.response.data.data
+						this.modalShow = true
+					} else {
+						showError(err.response.data.message)
+					}
 				}
-			}
+				this.$delete(this.uploadQueue, file.name)
+			})
+
 		},
 
 		overrideAttachment() {

src/services/AttachmentApi.js

@@ -37,11 +37,12 @@ export class AttachmentApi {
 		return response.data
 	}
 
-	async createAttachment({ cardId, formData }) {
+	async createAttachment({ cardId, formData, onUploadProgress }) {
 		const response = await axios({
 			method: 'POST',
 			url: this.url(`/cards/${cardId}/attachment`),
 			data: formData,
+			onUploadProgress,
 		})
 		return response.data
 	}

src/store/attachment.js

@@ -83,8 +83,8 @@ export default {
 			commit('createAttachments', { cardId, attachments })
 		},
 
-		async createAttachment({ commit }, { cardId, formData }) {
-			const attachment = await apiClient.createAttachment({ cardId, formData })
+		async createAttachment({ commit }, { cardId, formData, onUploadProgress }) {
+			const attachment = await apiClient.createAttachment({ cardId, formData, onUploadProgress })
 			commit('createAttachment', { cardId, attachment })
 			commit('cardIncreaseAttachmentCount', cardId)
 		},