From af646c1999c0510a3a920231eb7e31cb843a023e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Fri, 29 Jun 2018 21:52:54 +0200
Subject: [PATCH 1/2] Reset FileService status when switching cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 js/controller/CardController.js | 1 +
 js/service/FileService.js       | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/js/controller/CardController.js b/js/controller/CardController.js
index 29ce7e9fe..e7904054d 100644
--- a/js/controller/CardController.js
+++ b/js/controller/CardController.js
@@ -43,6 +43,7 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
 		return $state.params;
 	}, function (params) {
 		$scope.params = params;
+		$scope.fileservice.reset();
 	}, true);
 	$scope.params = $state.params;
 
diff --git a/js/service/FileService.js b/js/service/FileService.js
index 8248debd0..d35dcb15f 100644
--- a/js/service/FileService.js
+++ b/js/service/FileService.js
@@ -1,5 +1,5 @@
 /*
- * @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+* @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
  *
  * @author Julius Härtl <jus@bitgrid.net>
  *
@@ -37,6 +37,10 @@ export default class FileService {
 		this.status = null;
 	}
 
+	reset () {
+		this.status = null;
+	}
+
 	runUpload (fileItem, attachmentId) {
 		this.status = null;
 		fileItem.url = OC.generateUrl('/apps/deck/cards/' + fileItem.cardId + '/attachment?type=deck_file');
@@ -117,4 +121,4 @@ export default class FileService {
 
 }
 
-app.service('FileService', FileService);
\ No newline at end of file
+app.service('FileService', FileService);

From c0c0cb8545003cc4a572af6512766fc7d7aebd0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sat, 30 Jun 2018 09:46:51 +0200
Subject: [PATCH 2/2] Implement file upload status and cancel button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 css/style.scss                      |  3 +++
 js/service/FileService.js           | 17 +++++++++++++++--
 templates/part.card.attachments.php | 13 +++++++++++++
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/css/style.scss b/css/style.scss
index 4245715f7..673c4b45c 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -877,6 +877,9 @@ input.input-inline {
 			button.icon-history {
 				width: 44px;
 			}
+			progress {
+				margin-top: 3px;
+			}
 		}
 	}
 
diff --git a/js/service/FileService.js b/js/service/FileService.js
index d35dcb15f..0d511c428 100644
--- a/js/service/FileService.js
+++ b/js/service/FileService.js
@@ -32,8 +32,10 @@ export default class FileService {
 		this.uploader.onAfterAddingFile = this.onAfterAddingFile.bind(this);
 		this.uploader.onSuccessItem = this.onSuccessItem.bind(this);
 		this.uploader.onErrorItem = this.onErrorItem.bind(this);
-		
+		this.uploader.onCancelItem = this.onCancelItem.bind(this);
+
 		this.maxUploadSize = $rootScope.config.maxUploadSize;
+		this.progress = [];
 		this.status = null;
 	}
 
@@ -70,6 +72,7 @@ export default class FileService {
 
 		// Fetch card details before trying to upload so we can detect filename collisions properly
 		let self = this;
+		this.progress.push(fileItem);
 		this.cardservice.fetchOne(fileItem.cardId).then(function (data) {
 			let attachments = self.cardservice.get(fileItem.cardId).attachments;
 			let existingFile = attachments.find((attachment) => {
@@ -98,7 +101,7 @@ export default class FileService {
 				self.runUpload(fileItem);
 			}
 		}, function (error) {
-
+			this.progress = this.progress.filter((item) => (fileItem.file.name !== item.file.name));
 		});
 
 	}
@@ -110,15 +113,25 @@ export default class FileService {
 			attachments = attachments.splice(index, 1);
 		}
 		this.cardservice.get(item.cardId).attachments.push(response);
+		this.progress = this.progress.filter((fileItem) => (fileItem.file.name !== item.file.name));
 	}
 
 	onErrorItem (item, response) {
+		this.progress = this.progress.filter((fileItem) => (fileItem.file.name !== item.file.name));
 		this.status = {
 			error: t('deck', `Failed to upload:`) + ' ' + item.file.name,
 			message: response.message
 		};
 	}
 
+	onCancelItem (item) {
+		this.progress = this.progress.filter((fileItem) => (fileItem.file.name !== item.file.name));
+	}
+
+	getProgressItemsForCard (cardId) {
+		return this.progress.filter((fileItem) => (fileItem.cardId === cardId));
+	}
+
 }
 
 app.service('FileService', FileService);
diff --git a/templates/part.card.attachments.php b/templates/part.card.attachments.php
index 421a1bb9a..6a07de3e8 100644
--- a/templates/part.card.attachments.php
+++ b/templates/part.card.attachments.php
@@ -2,6 +2,19 @@
 <div class="attachment-list" ng-class="{selector: $ctrl.isFileSelector}">
 	<h3 class="attachment-selector" ng-if="$ctrl.isFileSelector"><?php p($l->t('Select an attachment')); ?>	<a class="icon-close" ng-click="$ctrl.abort()"></a></h3>
 <ul>
+	<li class="attachment"
+		ng-repeat="attachment in $ctrl.fileservice.getProgressItemsForCard($ctrl.cardservice.getCurrent().id)">
+		<a class="fileicon icon-file"></a>
+		<div class="details">
+			<div class="filename">
+				<span class="basename">{{ attachment.file.name }}</span>
+			</div>
+			<progress value="{{ attachment.progress }}" max="100"></progress>
+		</div>
+		<button class="icon icon-close button-inline" ng-click="attachment.cancel()">
+			<span class="hidden-visually"><?php p($l->t('Cancel upload')); ?></span>
+		</button>
+	</li>
 	<li class="attachment"
 		ng-repeat="attachment in $ctrl.cardservice.getCurrent().attachments | filter: {type: 'deck_file'} | orderBy: ['deletedAt', '-lastModified']"
 		ng-class="{deleted: attachment.deletedAt > 0, selector: $ctrl.isFileSelector}"