Adding a loading indicator on the upload button

Modules/Media/Assets/js/components/UploadButton.vue

@@ -22,7 +22,7 @@
             :show-file-list="false"
             :http-request="uploadFile"
             style="display: inline-block; margin-right: 10px;">
-        <el-button size="small" type="primary" style="padding: 11px 9px;">Upload File</el-button>
+        <el-button size="small" type="primary" style="padding: 11px 9px;" :loading="fileIsUploading">Upload File</el-button>
     </el-upload>
 </template>
 
@@ -35,6 +35,7 @@
         },
         data() {
             return {
+                fileIsUploading: false,
             }
         },
         computed: {
@@ -53,15 +54,18 @@
                 this.$events.emit('fileWasUploaded', response);
             },
             uploadFile(event) {
+                this.fileIsUploading = true;
                 let data = new FormData();
                 data.append('parent_id', this.parentId);
                 data.append('file', event.file);
                 axios.post(route('api.media.store'), data)
                     .then(response => {
                         this.$events.emit('fileWasUploaded', response);
+                        this.fileIsUploading = false;
                     })
                     .catch(error => {
                         console.log(error.response.data);
+                        this.fileIsUploading = false;
                         this.$notify.error({
                             title: 'Error',
                             message: error.response.data.errors.file[0]

public/js/app.js

@@ -94580,7 +94580,9 @@ exports.default = {
         parentId: { type: Number }
     },
     data: function data() {
-        return {};
+        return {
+            fileIsUploading: false
+        };
     },
 
     computed: {
@@ -94601,13 +94603,16 @@ exports.default = {
         uploadFile: function uploadFile(event) {
             var _this = this;
 
+            this.fileIsUploading = true;
             var data = new FormData();
             data.append('parent_id', this.parentId);
             data.append('file', event.file);
             _axios2.default.post(route('api.media.store'), data).then(function (response) {
                 _this.$events.emit('fileWasUploaded', response);
+                _this.fileIsUploading = false;
             }).catch(function (error) {
                 console.log(error.response.data);
+                _this.fileIsUploading = false;
                 _this.$notify.error({
                     title: 'Error',
                     message: error.response.data.errors.file[0]
@@ -94672,7 +94677,11 @@ var render = function() {
         "el-button",
         {
           staticStyle: { padding: "11px 9px" },
-          attrs: { size: "small", type: "primary" }
+          attrs: {
+            size: "small",
+            type: "primary",
+            loading: _vm.fileIsUploading
+          }
         },
         [_vm._v("Upload File")]
       )