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:
commit
951f25707a
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -172,6 +172,7 @@
|
|||
@uploading="disableSubmit"
|
||||
@uploaded="addMediaFile"
|
||||
@upload-failed="uploadFailed"
|
||||
@all-uploaded="enableSubmit"
|
||||
/>
|
||||
<div
|
||||
class="emoji-icon"
|
||||
|
|
Loading…
Reference in New Issue