Merge branch 'issue-312-media-upload' into 'develop'

#312 - media uploader not working with same file in adjacent order

See merge request pleroma/pleroma-fe!521
This commit is contained in:
Shpuld Shpludson 2019-02-04 16:48:13 +00:00
commit d5757d44e5
4 changed files with 17 additions and 13 deletions

View file

@ -3,19 +3,10 @@ import statusPosterService from '../../services/status_poster/status_poster.serv
import fileSizeFormatService from '../../services/file_size_format/file_size_format.js' import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
const mediaUpload = { const mediaUpload = {
mounted () {
const input = this.$el.querySelector('input')
input.addEventListener('change', ({target}) => {
for (var i = 0; i < target.files.length; i++) {
let file = target.files[i]
this.uploadFile(file)
}
})
},
data () { data () {
return { return {
uploading: false uploading: false,
uploadReady: true
} }
}, },
methods: { methods: {
@ -56,6 +47,18 @@ const mediaUpload = {
} else { } else {
e.dataTransfer.dropEffect = 'none' e.dataTransfer.dropEffect = 'none'
} }
},
clearFile () {
this.uploadReady = false
this.$nextTick(() => {
this.uploadReady = true
})
},
change ({target}) {
for (var i = 0; i < target.files.length; i++) {
let file = target.files[i]
this.uploadFile(file)
}
} }
}, },
props: [ props: [

View file

@ -3,7 +3,7 @@
<label class="btn btn-default" :title="$t('tool_tip.media_upload')"> <label class="btn btn-default" :title="$t('tool_tip.media_upload')">
<i class="icon-spin4 animate-spin" v-if="uploading"></i> <i class="icon-spin4 animate-spin" v-if="uploading"></i>
<i class="icon-upload" v-if="!uploading"></i> <i class="icon-upload" v-if="!uploading"></i>
<input type="file" style="position: fixed; top: -100em" multiple="true"></input> <input type="file" v-if="uploadReady" @change="change" style="position: fixed; top: -100em" multiple="true"></input>
</label> </label>
</div> </div>
</template> </template>

View file

@ -250,6 +250,7 @@ const PostStatusForm = {
visibility: newStatus.visibility, visibility: newStatus.visibility,
contentType: newStatus.contentType contentType: newStatus.contentType
} }
this.$refs.mediaUpload.clearFile()
this.$emit('posted') this.$emit('posted')
let el = this.$el.querySelector('textarea') let el = this.$el.querySelector('textarea')
el.style.height = 'auto' el.style.height = 'auto'

View file

@ -64,7 +64,7 @@
</div> </div>
</div> </div>
<div class='form-bottom'> <div class='form-bottom'>
<media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="uploadFailed" :drop-files="dropFiles"></media-upload> <media-upload ref="mediaUpload" @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="uploadFailed" :drop-files="dropFiles"></media-upload>
<p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p> <p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p>
<p class="faint" v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p> <p class="faint" v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p>