Implement file upload status and cancel button

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

css/style.scss

@@ -877,6 +877,9 @@ input.input-inline {
 			button.icon-history {
 				width: 44px;
 			}
+			progress {
+				margin-top: 3px;
+			}
 		}
 	}
 

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);

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}"