🙅 Disable image upload save btn when uploading (#805)

closes TryGhost/#8724

Adds a `isUploading` action that disables the `save` button for `upload-image` component until the upload process is finished.

ghost/admin/app/components/modals/upload-image.js

@@ -10,6 +10,7 @@ export default ModalComponent.extend({
 
     url: '',
     newUrl: '',
+    _isUploading: false,
 
     config: injectService(),
     notifications: injectService(),
@@ -97,6 +98,10 @@ export default ModalComponent.extend({
 
         confirm() {
             this.get('uploadImage').perform();
+        },
+
+        isUploading() {
+            this.toggleProperty('_isUploading');
         }
     }
 });

ghost/admin/app/templates/components/modals/upload-image.hbs

@@ -12,6 +12,8 @@
             image=newUrl
             saveButton=false
             update=(action 'fileUploaded')
+            uploadStarted=(action 'isUploading')
+            uploadFinished=(action 'isUploading')
             accept=model.accept
             extensions=model.extensions
             uploadUrl=model.uploadUrl
@@ -21,5 +23,9 @@
 
 <div class="modal-footer">
     <button {{action "closeModal"}} class="gh-btn"><span>Cancel</span></button>
-    {{gh-task-button task=uploadImage class="gh-btn gh-btn-blue right gh-btn-icon" data-test-modal-accept-button=true}}
+    {{#if _isUploading}}
+        <button class="gh-btn gh-btn-blue right gh-btn-icon disabled"><span>Save</span></button>
+    {{else}}
+        {{gh-task-button task=uploadImage class="gh-btn gh-btn-blue right gh-btn-icon" data-test-modal-accept-button=true}}
+    {{/if}}
 </div>