Disable the submit button while uploading attachment

src/components/post_status_form/post_status_form.js

@@ -22,12 +22,14 @@ const PostStatusForm = {
   props: [
     'replyTo',
     'repliedUser',
-    'attentions'
+    'attentions',
+    'submitDisabled'
   ],
   components: {
     MediaUpload
   },
   data () {
+    this.submitDisabled = false
     let statusText = ''
 
     if (this.replyTo) {
@@ -58,6 +60,13 @@ const PostStatusForm = {
     },
     addMediaFile (fileInfo) {
       this.newStatus.files.push(fileInfo)
+      this.enableSubmit()
+    },
+    disableSubmit () {
+      this.submitDisabled = true
+    },
+    enableSubmit () {
+      this.submitDisabled = false
     }
   }
 }

src/components/post_status_form/post_status_form.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="post-status-form">
-    <form v-on:submit.prevent="postStatus(newStatus)">
+    <form @submit.prevent="postStatus(newStatus)">
       <div class="form-group" >
         <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control"></textarea>
       </div>
@@ -10,8 +10,8 @@
         </div>
       </div>
       <div class='form-bottom'>
-        <media-upload v-on:uploaded="addMediaFile"></media-upload>
+        <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit"></media-upload>
-        <button type="submit" class="btn btn-default" >Submit</button>
+        <button :disabled="submitDisabled" type="submit" class="btn btn-default">Submit</button>
       </div>
     </form>
   </div>
@@ -49,6 +49,10 @@
      .btn {
          cursor: pointer;
      }
+
+     .btn[disabled] {
+         cursor: not-allowed;
+     }
  }
 
 </style>