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
This commit is contained in:
Shpuld Shpludson 2020-06-08 17:31:40 +00:00
commit 951f25707a
4 changed files with 24 additions and 11 deletions

View file

@ -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 - Cropped images look correct in Chrome
- Newlines in the muted words settings work again - Newlines in the muted words settings work again
- Clicking on non-latin hashtags won't open a new window - 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 ## [2.0.3] - 2020-05-02
### Fixed ### Fixed

View file

@ -5,10 +5,15 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for
const mediaUpload = { const mediaUpload = {
data () { data () {
return { return {
uploading: false, uploadCount: 0,
uploadReady: true uploadReady: true
} }
}, },
computed: {
uploading () {
return this.uploadCount > 0
}
},
methods: { methods: {
uploadFile (file) { uploadFile (file) {
const self = this const self = this
@ -23,21 +28,27 @@ const mediaUpload = {
formData.append('file', file) formData.append('file', file)
self.$emit('uploading') self.$emit('uploading')
self.uploading = true self.uploadCount++
statusPosterService.uploadMedia({ store, formData }) statusPosterService.uploadMedia({ store, formData })
.then((fileData) => { .then((fileData) => {
self.$emit('uploaded', fileData) self.$emit('uploaded', fileData)
self.uploading = false self.decreaseUploadCount()
}, (error) => { // eslint-disable-line handle-callback-err }, (error) => { // eslint-disable-line handle-callback-err
self.$emit('upload-failed', 'default') self.$emit('upload-failed', 'default')
self.uploading = false self.decreaseUploadCount()
}) })
}, },
decreaseUploadCount () {
this.uploadCount--
if (this.uploadCount === 0) {
this.$emit('all-uploaded')
}
},
fileDrop (e) { fileDrop (e) {
if (e.dataTransfer.files.length > 0) { if (e.dataTransfer.files.length > 0) {
e.preventDefault() // allow dropping text like before e.preventDefault() // allow dropping text like before
this.uploadFile(e.dataTransfer.files[0]) this.multiUpload(e.dataTransfer.files)
} }
}, },
fileDrag (e) { fileDrag (e) {
@ -54,11 +65,13 @@ const mediaUpload = {
this.uploadReady = true this.uploadReady = true
}) })
}, },
change ({ target }) { multiUpload (files) {
for (var i = 0; i < target.files.length; i++) { for (const file of files) {
let file = target.files[i]
this.uploadFile(file) this.uploadFile(file)
} }
},
change ({ target }) {
this.multiUpload(target.files)
} }
}, },
props: [ props: [
@ -67,7 +80,7 @@ const mediaUpload = {
watch: { watch: {
'dropFiles': function (fileInfos) { 'dropFiles': function (fileInfos) {
if (!this.uploading) { if (!this.uploading) {
this.uploadFile(fileInfos[0]) this.multiUpload(fileInfos)
} }
} }
} }

View file

@ -218,7 +218,6 @@ const PostStatusForm = {
}, },
addMediaFile (fileInfo) { addMediaFile (fileInfo) {
this.newStatus.files.push(fileInfo) this.newStatus.files.push(fileInfo)
this.enableSubmit()
}, },
removeMediaFile (fileInfo) { removeMediaFile (fileInfo) {
let index = this.newStatus.files.indexOf(fileInfo) let index = this.newStatus.files.indexOf(fileInfo)
@ -227,7 +226,6 @@ const PostStatusForm = {
uploadFailed (errString, templateArgs) { uploadFailed (errString, templateArgs) {
templateArgs = templateArgs || {} templateArgs = templateArgs || {}
this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs) this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs)
this.enableSubmit()
}, },
disableSubmit () { disableSubmit () {
this.submitDisabled = true this.submitDisabled = true

View file

@ -172,6 +172,7 @@
@uploading="disableSubmit" @uploading="disableSubmit"
@uploaded="addMediaFile" @uploaded="addMediaFile"
@upload-failed="uploadFailed" @upload-failed="uploadFailed"
@all-uploaded="enableSubmit"
/> />
<div <div
class="emoji-icon" class="emoji-icon"