Show spinner while uploading file

This commit is contained in:
Alexander Gitter 2016-11-13 18:26:10 +01:00
parent d6cc55ca8c
commit 7d3a6e77e4
2 changed files with 15 additions and 1 deletions

View File

@ -11,11 +11,24 @@ const mediaUpload = {
const file = target.files[0] const file = target.files[0]
const formData = new FormData() const formData = new FormData()
formData.append('media', file) formData.append('media', file)
self.$emit('uploading')
self.uploading = true
statusPosterService.uploadMedia({ store, formData }) statusPosterService.uploadMedia({ store, formData })
.then((fileData) => { .then((fileData) => {
self.$emit('uploaded', fileData) self.$emit('uploaded', fileData)
self.uploading = false
}, (error) => {
self.$emit('upload-failed')
self.uploading = false
}) })
}) })
},
data () {
return {
uploading: false
}
} }
} }

View File

@ -1,7 +1,8 @@
<template> <template>
<div class="media-upload"> <div class="media-upload">
<label class="btn btn-default"> <label class="btn btn-default">
<i class="fa icon-upload"></i> <i class="fa icon-spin4 animate-spin" v-if="uploading"></i>
<i class="fa icon-upload" v-if="!uploading"></i>
<input type=file style="position: fixed; top: -100em"></input> <input type=file style="position: fixed; top: -100em"></input>
</label> </label>
</div> </div>