ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Implement file upload status and cancel button

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2018-06-30 09:46:51 +02:00
parent af646c1999
commit c0c0cb8545
3 changed files with 31 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
css/style.scss
View File

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

15
js/service/FileService.js
View File

@@ -32,8 +32,10 @@ export default class FileService {
this.uploader.onAfterAddingFile = this.onAfterAddingFile.bind(this); this.uploader.onAfterAddingFile = this.onAfterAddingFile.bind(this);
this.uploader.onSuccessItem = this.onSuccessItem.bind(this); this.uploader.onSuccessItem = this.onSuccessItem.bind(this);
this.uploader.onErrorItem = this.onErrorItem.bind(this); this.uploader.onErrorItem = this.onErrorItem.bind(this);
this.uploader.onCancelItem = this.onCancelItem.bind(this);
this.maxUploadSize = $rootScope.config.maxUploadSize; this.maxUploadSize = $rootScope.config.maxUploadSize;
this.progress = [];
this.status = null; 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 // Fetch card details before trying to upload so we can detect filename collisions properly
let self = this; let self = this;
this.progress.push(fileItem);
this.cardservice.fetchOne(fileItem.cardId).then(function (data) { this.cardservice.fetchOne(fileItem.cardId).then(function (data) {
let attachments = self.cardservice.get(fileItem.cardId).attachments; let attachments = self.cardservice.get(fileItem.cardId).attachments;
let existingFile = attachments.find((attachment) => { let existingFile = attachments.find((attachment) => {
@@ -98,7 +101,7 @@ export default class FileService {
self.runUpload(fileItem); self.runUpload(fileItem);
} }
}, function (error) { }, 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); attachments = attachments.splice(index, 1);
} }
this.cardservice.get(item.cardId).attachments.push(response); this.cardservice.get(item.cardId).attachments.push(response);
this.progress = this.progress.filter((fileItem) => (fileItem.file.name !== item.file.name));
} }
onErrorItem (item, response) { onErrorItem (item, response) {
this.progress = this.progress.filter((fileItem) => (fileItem.file.name !== item.file.name));
this.status = { this.status = {
error: t('deck', `Failed to upload:`) + ' ' + item.file.name, error: t('deck', `Failed to upload:`) + ' ' + item.file.name,
message: response.message 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); app.service('FileService', FileService);

13
templates/part.card.attachments.php
View File

@@ -2,6 +2,19 @@
<div class="attachment-list" ng-class="{selector: $ctrl.isFileSelector}"> <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> <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> <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" <li class="attachment"
ng-repeat="attachment in $ctrl.cardservice.getCurrent().attachments | filter: {type: 'deck_file'} | orderBy: ['deletedAt', '-lastModified']" ng-repeat="attachment in $ctrl.cardservice.getCurrent().attachments | filter: {type: 'deck_file'} | orderBy: ['deletedAt', '-lastModified']"
ng-class="{deleted: attachment.deletedAt > 0, selector: $ctrl.isFileSelector}" ng-class="{deleted: attachment.deletedAt > 0, selector: $ctrl.isFileSelector}"