Add progress indicator and basic uplaod queue

Signed-off-by: Julius Härtl <jus@bitgrid.net>

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 (let file of files) {
+				this.onLocalAttachmentSelected(file)
+			}
 			event.dataTransfer.value = ''
 		},
 	},

src/components/card/CardSidebarTabAttachments.vue

@@ -28,9 +28,14 @@
 		<input ref="localAttachments"
 			type="file"
 			style="display: none;"
+			multiple
 			@change="handleUploadFile">
 		<div class="attachment-list">
 			<ul>
+				<li v-for="attachment in uploadQueue">
+					{{ attachment.name }}
+					<progress :value="attachment.progress" max="100"></progress>
+				</li>
 				<li v-for="attachment in attachments"
 					:key="attachment.id"
 					class="attachment"
@@ -109,7 +114,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 +139,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 (let file of files) {
+				this.onLocalAttachmentSelected(file)
+			}
 			event.target.value = ''
 		},
 		clickAddNewAttachmment() {

src/mixins/attachmentUpload.js

@@ -23,6 +23,11 @@ import { showError } from '@nextcloud/dialogs'
 import { formatFileSize } from '@nextcloud/files'
 
 export default {
+	data() {
+		return {
+			uploadQueue: {},
+		}
+	},
 	methods: {
 		async onLocalAttachmentSelected(file) {
 			if (this.maxUploadSize > 0 && file.size > this.maxUploadSize) {
@@ -34,6 +39,7 @@ 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')
@@ -42,8 +48,11 @@ export default {
 				await this.$store.dispatch('createAttachment', { cardId: this.cardId,
 					formData: bodyFormData,
 					onUploadProgress: (e) => {
-						console.log(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
@@ -52,6 +61,7 @@ export default {
 					showError(err.response.data.message)
 				}
 			}
+			this.$delete(this.uploadQueue, file.name)
 		},
 
 		overrideAttachment() {

src/services/AttachmentApi.js

@@ -38,18 +38,10 @@ export class AttachmentApi {
 	}
 
 	async createAttachment({ cardId, formData, onUploadProgress }) {
-		const config = {
-			onUploadProgress: function(progressEvent) {
-			  const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
-			  console.log(percentCompleted)
-			},
-		}
-
 		const response = await axios({
 			method: 'POST',
 			url: this.url(`/cards/${cardId}/attachment`),
 			data: formData,
-			...config,
 			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)
 		},