From e6a27bcaca57c4c6351f7c41c2892c4e5222829e Mon Sep 17 00:00:00 2001 From: lain Date: Mon, 8 Jun 2020 13:30:16 +0200 Subject: [PATCH 1/5] MediaUpload: Allow drag-and-drop of multiple files at once --- src/components/media_upload/media_upload.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js index f457d022..4568224b 100644 --- a/src/components/media_upload/media_upload.js +++ b/src/components/media_upload/media_upload.js @@ -37,7 +37,9 @@ const mediaUpload = { fileDrop (e) { if (e.dataTransfer.files.length > 0) { e.preventDefault() // allow dropping text like before - this.uploadFile(e.dataTransfer.files[0]) + for (const file of e.dataTransfer.files) { + this.uploadFile(file) + } } }, fileDrag (e) { From e45f7fe8772f538c6824718ec26067849bde34c6 Mon Sep 17 00:00:00 2001 From: lain Date: Mon, 8 Jun 2020 18:22:17 +0200 Subject: [PATCH 2/5] MediaUpload: Correctly handle multiple uploads. --- src/components/media_upload/media_upload.js | 33 ++++++++++++------- .../post_status_form/post_status_form.js | 2 -- .../post_status_form/post_status_form.vue | 1 + 3 files changed, 23 insertions(+), 13 deletions(-) diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js index 4568224b..16e47ef7 100644 --- a/src/components/media_upload/media_upload.js +++ b/src/components/media_upload/media_upload.js @@ -5,10 +5,15 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for const mediaUpload = { data () { return { - uploading: false, + uploadCount: 0, uploadReady: true } }, + computed: { + uploading () { + return this.uploadCount > 0 + } + }, methods: { uploadFile (file) { const self = this @@ -23,23 +28,27 @@ const mediaUpload = { formData.append('file', file) self.$emit('uploading') - self.uploading = true + self.uploadCount++ statusPosterService.uploadMedia({ store, formData }) .then((fileData) => { self.$emit('uploaded', fileData) - self.uploading = false + self.decreaseUploadCount() }, (error) => { // eslint-disable-line handle-callback-err self.$emit('upload-failed', 'default') - self.uploading = false + self.decreaseUploadCount() }) }, + decreaseUploadCount() { + this.uploadCount-- + if (this.uploadCount === 0) { + this.$emit('all-uploaded') + } + }, fileDrop (e) { if (e.dataTransfer.files.length > 0) { e.preventDefault() // allow dropping text like before - for (const file of e.dataTransfer.files) { - this.uploadFile(file) - } + this.multiUpload(e.dataTransfer.files) } }, fileDrag (e) { @@ -56,11 +65,13 @@ const mediaUpload = { this.uploadReady = true }) }, - change ({ target }) { - for (var i = 0; i < target.files.length; i++) { - let file = target.files[i] + multiUpload (files) { + for (const file of files) { this.uploadFile(file) } + }, + change ({ target }) { + this.multiUpload(target.files) } }, props: [ @@ -69,7 +80,7 @@ const mediaUpload = { watch: { 'dropFiles': function (fileInfos) { if (!this.uploading) { - this.uploadFile(fileInfos[0]) + this.multiUpload(fileInfos) } } } diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index a98e1e31..6164caa0 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -218,7 +218,6 @@ const PostStatusForm = { }, addMediaFile (fileInfo) { this.newStatus.files.push(fileInfo) - this.enableSubmit() }, removeMediaFile (fileInfo) { let index = this.newStatus.files.indexOf(fileInfo) @@ -227,7 +226,6 @@ const PostStatusForm = { uploadFailed (errString, templateArgs) { templateArgs = templateArgs || {} this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs) - this.enableSubmit() }, disableSubmit () { this.submitDisabled = true diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 9789a481..5629ceac 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -172,6 +172,7 @@ @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="uploadFailed" + @all-uploaded="enableSubmit" />
Date: Mon, 8 Jun 2020 18:26:16 +0200 Subject: [PATCH 3/5] Linting. --- src/components/media_upload/media_upload.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js index 16e47ef7..5849b065 100644 --- a/src/components/media_upload/media_upload.js +++ b/src/components/media_upload/media_upload.js @@ -39,7 +39,7 @@ const mediaUpload = { self.decreaseUploadCount() }) }, - decreaseUploadCount() { + decreaseUploadCount () { this.uploadCount-- if (this.uploadCount === 0) { this.$emit('all-uploaded') From d5ec269d884ab13b641acb816a951ab3db3ec428 Mon Sep 17 00:00:00 2001 From: lain Date: Mon, 8 Jun 2020 19:14:13 +0200 Subject: [PATCH 4/5] Update changelog. --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3e467bc9..85e03095 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Cropped images look correct in Chrome - Newlines in the muted words settings work again - Clicking on non-latin hashtags won't open a new window +- Uploading and drag-dropping files works correctly now. ## [2.0.3] - 2020-05-02 ### Fixed From d8211392c425564598328a760a659f46a47147fd Mon Sep 17 00:00:00 2001 From: lain Date: Mon, 8 Jun 2020 17:24:08 +0000 Subject: [PATCH 5/5] Apply suggestion to CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 85e03095..1467f133 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,7 +25,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Cropped images look correct in Chrome - Newlines in the muted words settings work again - Clicking on non-latin hashtags won't open a new window -- Uploading and drag-dropping files works correctly now. +- Uploading and drag-dropping multiple files works correctly now. ## [2.0.3] - 2020-05-02 ### Fixed