diff options
author | Christoph Wurst <ChristophWurst@users.noreply.github.com> | 2019-03-08 13:07:51 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-03-08 13:07:51 +0300 |
commit | 2143e747a1a4a8b5f77061d7db76ae58557a369f (patch) | |
tree | 250bcb432ef6b3e4a9b9a08afae7908147e6244f /src | |
parent | 62250ecfe8c0af660ddce22caf6afd77afc51f54 (diff) | |
parent | 749e24a386b0994a27a52e4d4a87a855df8e8fa3 (diff) |
Merge pull request #1592 from nextcloud/feature/attachment-upload-progress
Show upload progress for local attachments
Diffstat (limited to 'src')
-rw-r--r-- | src/components/ComposerAttachments.vue | 46 | ||||
-rw-r--r-- | src/service/AttachmentService.js | 4 |
2 files changed, 39 insertions, 11 deletions
diff --git a/src/components/ComposerAttachments.vue b/src/components/ComposerAttachments.vue index b674ccd40..3e7195df2 100644 --- a/src/components/ComposerAttachments.vue +++ b/src/components/ComposerAttachments.vue @@ -31,7 +31,11 @@ </ul> <button class="button" :disabled="uploading" @click="onAddLocalAttachment"> <span :class="{'icon-upload': !uploading, 'icon-loading-small': uploading}"></span> - {{ uploading ? t('mail', 'Uploading …') : t('mail', 'Upload attachment') }} + {{ + uploading + ? t('mail', 'Uploading {percent}% …', {percent: uploadProgress}) + : t('mail', 'Upload attachment') + }} </button> <button class="button" @click="onAddCloudAttachment"> <span class="icon-folder" /> @@ -45,6 +49,7 @@ import _ from 'lodash' import {translate as t} from 'nextcloud-server/dist/l10n' import {pickFileOrDirectory} from 'nextcloud-server/dist/files' +import Vue from 'vue' import {uploadLocalAttachment} from '../service/AttachmentService' @@ -59,8 +64,20 @@ export default { data() { return { uploading: false, + uploads: {}, } }, + computed: { + uploadProgress() { + let uploaded = 0 + let total = 0 + for (let id in this.uploads) { + uploaded += this.uploads[id].uploaded + total += this.uploads[id].total + } + return ((uploaded / total) * 100).toFixed(1) + }, + }, methods: { onAddLocalAttachment() { this.$refs.localAttachments.click() @@ -79,14 +96,25 @@ export default { onLocalAttachmentSelected(e) { this.uploading = true - const done = Promise.all( - _.map(e.target.files, file => - uploadLocalAttachment(file).then(({file, id}) => { - console.info('uploaded') - return this.emitNewAttachment(this.fileNameToAttachment(file.name, id)) - }) - ) - ) + Vue.set(this, 'uploads', {}) + + const progress = id => (prog, uploaded) => { + this.uploads[id].uploaded = uploaded + } + + const promises = _.map(e.target.files, file => { + Vue.set(this.uploads, file.name, { + total: file.size, + uploaded: 0, + }) + + return uploadLocalAttachment(file, progress(file.name)).then(({file, id}) => { + console.info('uploaded') + return this.emitNewAttachment(this.fileNameToAttachment(file.name, id)) + }) + }) + + const done = Promise.all(promises) .catch(console.error.bind(this)) .then(() => (this.uploading = false)) diff --git a/src/service/AttachmentService.js b/src/service/AttachmentService.js index 0a9f94caf..6d1de6c4e 100644 --- a/src/service/AttachmentService.js +++ b/src/service/AttachmentService.js @@ -46,11 +46,11 @@ export function downloadAttachment(url) { return Axios.get(url).then(res => res.data) } -export const uploadLocalAttachment = file => { +export const uploadLocalAttachment = (file, progress) => { const url = generateUrl('/apps/mail/api/attachments') const data = new FormData() const opts = { - onUploadProgress: prog => console.log(prog, prog.loaded, prog.total), + onUploadProgress: prog => progress(prog, prog.loaded, prog.total), } data.append('attachment', file) |