Show spinner while uploading file

2 files changed, 15 insertions, 1 deletions

diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index 8ae86a8d..3f2e3964 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -11,11 +11,24 @@ const mediaUpload = {
       const file = target.files[0]
       const formData = new FormData()
       formData.append('media', file)
+
+      self.$emit('uploading')
+      self.uploading = true
+
       statusPosterService.uploadMedia({ store, formData })
         .then((fileData) => {
           self.$emit('uploaded', fileData)
+          self.uploading = false
+        }, (error) => {
+          self.$emit('upload-failed')
+          self.uploading = false
         })
     })
+  },
+  data () {
+    return {
+      uploading: false
+    }
   }
 }
 
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index a62d8316..f2f0b83f 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="media-upload">
     <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>
     </label>
   </div>