commit: 951f25707a3e38d0585a55a4d18135c8b64c0d2a
parent: acbef1ebdc5697daf43c6b63b2ba7f8cd1143944
Author: Shpuld Shpludson <shp@cock.li>
Date: Mon, 8 Jun 2020 17:31:40 +0000
Merge branch '572-multiple-file-drag-and-drop' into 'develop'
MediaUpload: Allow drag-and-drop of multiple files at once
Closes #572
See merge request pleroma/pleroma-fe!1135
Diffstat:
4 files changed, 24 insertions(+), 11 deletions(-)
diff --git 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 multiple files works correctly now.
## [2.0.3] - 2020-05-02
### Fixed
diff --git 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,21 +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
- this.uploadFile(e.dataTransfer.files[0])
+ this.multiUpload(e.dataTransfer.files)
}
},
fileDrag (e) {
@@ -54,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: [
@@ -67,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
@@ -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
@@ -172,6 +172,7 @@
@uploading="disableSubmit"
@uploaded="addMediaFile"
@upload-failed="uploadFailed"
+ @all-uploaded="enableSubmit"
/>
<div
class="emoji-icon"