From 6cab67cb11f5f88a0543dc05d39ffa19d28fcdfa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20R=C3=B6hrl?= <jakob.roehrl@web.de>
Date: Wed, 1 Apr 2020 11:11:28 +0200
Subject: [PATCH 1/3] axios config
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>
---
 src/mixins/attachmentUpload.js |  6 +++++-
 src/services/AttachmentApi.js  | 11 ++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/mixins/attachmentUpload.js b/src/mixins/attachmentUpload.js
index 95f93fd8d..ab6b16990 100644
--- a/src/mixins/attachmentUpload.js
+++ b/src/mixins/attachmentUpload.js
@@ -39,7 +39,11 @@ export default {
 			bodyFormData.append('type', 'deck_file')
 			bodyFormData.append('file', file)
 			try {
-				await this.$store.dispatch('createAttachment', { cardId: this.cardId, formData: bodyFormData })
+				await this.$store.dispatch('createAttachment', { cardId: this.cardId,
+					formData: bodyFormData,
+					onUploadProgress: (e) => {
+						console.log(e)
+					} })
 			} catch (err) {
 				if (err.response.data.status === 409) {
 					this.overwriteAttachment = err.response.data.data
diff --git a/src/services/AttachmentApi.js b/src/services/AttachmentApi.js
index 2849c913f..90b23c3dc 100644
--- a/src/services/AttachmentApi.js
+++ b/src/services/AttachmentApi.js
@@ -37,11 +37,20 @@ export class AttachmentApi {
 		return response.data
 	}
 
-	async createAttachment({ cardId, formData }) {
+	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
 	}

From 22fb70f9572f28a91b73943284d122057f799f90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sat, 4 Apr 2020 21:24:15 +0200
Subject: [PATCH 2/3] Add progress indicator and basic uplaod queue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/AttachmentDragAndDrop.vue      | 11 +++-----
 .../card/CardSidebarTabAttachments.vue        | 26 +++++++------------
 src/mixins/attachmentUpload.js                | 14 ++++++++--
 src/services/AttachmentApi.js                 |  8 ------
 src/store/attachment.js                       |  4 +--
 5 files changed, 28 insertions(+), 35 deletions(-)

diff --git a/src/components/AttachmentDragAndDrop.vue b/src/components/AttachmentDragAndDrop.vue
index 4c439424f..56f35384d 100644
--- a/src/components/AttachmentDragAndDrop.vue
+++ b/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 = ''
 		},
 	},
diff --git a/src/components/card/CardSidebarTabAttachments.vue b/src/components/card/CardSidebarTabAttachments.vue
index f22efe172..d0b985d17 100644
--- a/src/components/card/CardSidebarTabAttachments.vue
+++ b/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() {
diff --git a/src/mixins/attachmentUpload.js b/src/mixins/attachmentUpload.js
index ab6b16990..e6e357c02 100644
--- a/src/mixins/attachmentUpload.js
+++ b/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() {
diff --git a/src/services/AttachmentApi.js b/src/services/AttachmentApi.js
index 90b23c3dc..b3de97e48 100644
--- a/src/services/AttachmentApi.js
+++ b/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
diff --git a/src/store/attachment.js b/src/store/attachment.js
index 966958256..8376adf95 100644
--- a/src/store/attachment.js
+++ b/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)
 		},

From 396a5c395f783580dfd885cf82d3fcc0abff04bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sat, 4 Apr 2020 21:36:41 +0200
Subject: [PATCH 3/3] Fix styling and run only two uploads in parallel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 package-lock.json                             | 25 +++++++++++-
 package.json                                  |  1 +
 src/components/AttachmentDragAndDrop.vue      |  2 +-
 .../card/CardSidebarTabAttachments.vue        | 21 ++++++----
 src/mixins/attachmentUpload.js                | 40 +++++++++++--------
 5 files changed, 62 insertions(+), 27 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3c6723d4e..56b3e13ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7503,6 +7503,11 @@
 			"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
 			"integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs="
 		},
+		"eventemitter3": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.0.tgz",
+			"integrity": "sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg=="
+		},
 		"events": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/events/-/events-3.1.0.tgz",
@@ -13258,8 +13263,7 @@
 		"p-finally": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
-			"integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
-			"dev": true
+			"integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4="
 		},
 		"p-is-promise": {
 			"version": "2.1.0",
@@ -13285,6 +13289,23 @@
 				"p-limit": "^1.1.0"
 			}
 		},
+		"p-queue": {
+			"version": "6.3.0",
+			"resolved": "https://registry.npmjs.org/p-queue/-/p-queue-6.3.0.tgz",
+			"integrity": "sha512-fg5dJlFpd5+3CgG3/0ogpVZUeJbjiyXFg0nu53hrOYsybqSiDyxyOpad0Rm6tAiGjgztAwkyvhlYHC53OiAJOA==",
+			"requires": {
+				"eventemitter3": "^4.0.0",
+				"p-timeout": "^3.1.0"
+			}
+		},
+		"p-timeout": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
+			"integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
+			"requires": {
+				"p-finally": "^1.0.0"
+			}
+		},
 		"p-try": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
diff --git a/package.json b/package.json
index f6b78eae3..8f82cc51c 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
 		"blueimp-md5": "^2.13.0",
 		"dompurify": "^2.0.8",
 		"nextcloud-vue-collections": "^0.7.2",
+		"p-queue": "^6.3.0",
 		"url-search-params-polyfill": "^8.0.0",
 		"vue": "^2.6.11",
 		"vue-at": "^2.5.0-beta.2",
diff --git a/src/components/AttachmentDragAndDrop.vue b/src/components/AttachmentDragAndDrop.vue
index 56f35384d..c901d359e 100644
--- a/src/components/AttachmentDragAndDrop.vue
+++ b/src/components/AttachmentDragAndDrop.vue
@@ -108,7 +108,7 @@ export default {
 				return
 			}
 			const files = event.dataTransfer.files
-			for (let file of files) {
+			for (const file of files) {
 				this.onLocalAttachmentSelected(file)
 			}
 			event.dataTransfer.value = ''
diff --git a/src/components/card/CardSidebarTabAttachments.vue b/src/components/card/CardSidebarTabAttachments.vue
index d0b985d17..c134a8263 100644
--- a/src/components/card/CardSidebarTabAttachments.vue
+++ b/src/components/card/CardSidebarTabAttachments.vue
@@ -32,14 +32,20 @@
 			@change="handleUploadFile">
 		<div class="attachment-list">
 			<ul>
-				<li v-for="attachment in uploadQueue">
-					{{ attachment.name }}
-					<progress :value="attachment.progress" max="100"></progress>
+				<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">
@@ -114,7 +120,7 @@ export default {
 			}
 		},
 		attachments() {
-			return this.$store.getters.attachmentsByCard(this.card.id).sort((a, b) => b.id - a.id)
+			return [...this.$store.getters.attachmentsByCard(this.card.id)].sort((a, b) => b.id - a.id)
 		},
 		formattedFileSize() {
 			return (filesize) => formatFileSize(filesize)
@@ -141,7 +147,7 @@ export default {
 	methods: {
 		handleUploadFile(event) {
 			const files = event.target.files ?? []
-			for (let file of files) {
+			for (const file of files) {
 				this.onLocalAttachmentSelected(file)
 			}
 			event.target.value = ''
@@ -208,6 +214,7 @@ export default {
 		li.attachment {
 			display: flex;
 			padding: 3px;
+			min-height: 44px;
 
 			&.deleted {
 				opacity: .5;
diff --git a/src/mixins/attachmentUpload.js b/src/mixins/attachmentUpload.js
index e6e357c02..ede21c5a3 100644
--- a/src/mixins/attachmentUpload.js
+++ b/src/mixins/attachmentUpload.js
@@ -21,6 +21,9 @@
  */
 import { showError } from '@nextcloud/dialogs'
 import { formatFileSize } from '@nextcloud/files'
+import PQueue from 'p-queue'
+
+const queue = new PQueue({ concurrency: 2 })
 
 export default {
 	data() {
@@ -39,29 +42,32 @@ export default {
 				return
 			}
 
-			this.$set(this.uploadQueue, file.name, { name: file.name, progress: 0})
+			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,
-					onUploadProgress: (e) => {
-						const percentCompleted = Math.round((e.loaded * 100) / e.total)
-						console.debug(percentCompleted)
-						this.$set(this.uploadQueue[file.name], 'progress', percentCompleted)
+			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)
 					}
-				})
-			} 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)
+				this.$delete(this.uploadQueue, file.name)
+			})
+
 		},
 
 		overrideAttachment() {