disable file upload button while uploading

hide placeholder text when files have been added
vertically center dropzone area content
close modal after file upload succeeds

7 files changed, 84 insertions, 4 deletions

diff --git a/app/assets/javascripts/blob/blob_file_dropzone.js b/app/assets/javascripts/blob/blob_file_dropzone.js
index dc636050221..26d3419a162 100644
--- a/app/assets/javascripts/blob/blob_file_dropzone.js
+++ b/app/assets/javascripts/blob/blob_file_dropzone.js
@@ -1,9 +1,24 @@
 /* eslint-disable func-names, object-shorthand, prefer-arrow-callback */
 /* global Dropzone */
 
+import '../lib/utils/url_utility';
+import { HIDDEN_CLASS } from '../lib/utils/constants';
+
+function toggleLoading($el, $icon, loading) {
+  if (loading) {
+    $el.disable();
+    $icon.removeClass(HIDDEN_CLASS);
+  } else {
+    $el.enable();
+    $icon.addClass(HIDDEN_CLASS);
+  }
+}
 export default class BlobFileDropzone {
   constructor(form, method) {
     const formDropzone = form.find('.dropzone');
+    const submitButton = form.find('#submit-all');
+    const submitButtonLoadingIcon = submitButton.find('.js-loading-icon');
+    const dropzoneMessage = form.find('.dz-message');
     Dropzone.autoDiscover = false;
 
     const dropzone = formDropzone.dropzone({
@@ -26,12 +41,20 @@ export default class BlobFileDropzone {
       },
       init: function () {
         this.on('addedfile', function () {
+          toggleLoading(submitButton, submitButtonLoadingIcon, false);
+          dropzoneMessage.addClass(HIDDEN_CLASS);
           $('.dropzone-alerts').html('').hide();
         });
+        this.on('removedfile', function () {
+          toggleLoading(submitButton, submitButtonLoadingIcon, false);
+          dropzoneMessage.removeClass(HIDDEN_CLASS);
+        });
         this.on('success', function (header, response) {
-          window.location.href = response.filePath;
+          $('#modal-upload-blob').modal('hide');
+          window.gl.utils.visitUrl(response.filePath);
         });
         this.on('maxfilesexceeded', function (file) {
+          dropzoneMessage.addClass(HIDDEN_CLASS);
           this.removeFile(file);
         });
         this.on('sending', function (file, xhr, formData) {
@@ -48,14 +71,15 @@ export default class BlobFileDropzone {
       },
     });
 
-    const submitButton = form.find('#submit-all')[0];
-    submitButton.addEventListener('click', function (e) {
+    submitButton.on('click', (e) => {
       e.preventDefault();
       e.stopPropagation();
       if (dropzone[0].dropzone.getQueuedFiles().length === 0) {
         // eslint-disable-next-line no-alert
         alert('Please select a file');
+        return false;
       }
+      toggleLoading(submitButton, submitButtonLoadingIcon, true);
       dropzone[0].dropzone.processQueue();
       return false;
     });
diff --git a/app/assets/javascripts/lib/utils/constants.js b/app/assets/javascripts/lib/utils/constants.js
index 1e96c7ab5cd..7a72509d234 100644
--- a/app/assets/javascripts/lib/utils/constants.js
+++ b/app/assets/javascripts/lib/utils/constants.js
@@ -1,2 +1,3 @@
 /* eslint-disable import/prefer-default-export */
 export const BYTES_IN_KIB = 1024;
+export const HIDDEN_CLASS = 'hidden';
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 5e374360359..293aa194528 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -372,6 +372,10 @@ table {
   background: $gl-success !important;
 }
 
+.dz-message {
+  margin: 0;
+}
+
 .space-right {
   margin-right: 10px;
 }
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index dc88cf3e699..246d6e69632 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -215,6 +215,9 @@
 }
 
 .blob-upload-dropzone-previews {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   text-align: center;
   border: 2px;
   border-style: dashed;
diff --git a/app/views/projects/blob/_upload.html.haml b/app/views/projects/blob/_upload.html.haml
index 32dbc1b3417..05b7dfe2872 100644
--- a/app/views/projects/blob/_upload.html.haml
+++ b/app/views/projects/blob/_upload.html.haml
@@ -19,7 +19,9 @@
           = render 'shared/new_commit_form', placeholder: placeholder
 
           .form-actions
-            = button_tag button_title, class: 'btn btn-small btn-create btn-upload-file', id: 'submit-all'
+            = button_tag class: 'btn btn-create btn-upload-file', id: 'submit-all', type: 'button' do
+              = icon('spin spinner', class: 'js-loading-icon hidden' )
+              = button_title
             = link_to _("Cancel"), '#', class: "btn btn-cancel", "data-dismiss" => "modal"
 
             - unless can?(current_user, :push_code, @project)
diff --git a/changelogs/unreleased/35052-please-select-a-file-when-attempting-to-upload-or-replace-from-the-ui.yml b/changelogs/unreleased/35052-please-select-a-file-when-attempting-to-upload-or-replace-from-the-ui.yml
new file mode 100644
index 00000000000..5925da14f89
--- /dev/null
+++ b/changelogs/unreleased/35052-please-select-a-file-when-attempting-to-upload-or-replace-from-the-ui.yml
@@ -0,0 +1,4 @@
+---
+title: improve file upload/replace experience
+merge_request:
+author:
diff --git a/spec/javascripts/blob/blob_file_dropzone_spec.js b/spec/javascripts/blob/blob_file_dropzone_spec.js
new file mode 100644
index 00000000000..2c8183ff77b
--- /dev/null
+++ b/spec/javascripts/blob/blob_file_dropzone_spec.js
@@ -0,0 +1,42 @@
+import 'dropzone';
+import BlobFileDropzone from '~/blob/blob_file_dropzone';
+
+describe('BlobFileDropzone', () => {
+  preloadFixtures('blob/show.html.raw');
+
+  beforeEach(() => {
+    loadFixtures('blob/show.html.raw');
+    const form = $('.js-upload-blob-form');
+    this.blobFileDropzone = new BlobFileDropzone(form, 'POST');
+    this.dropzone = $('.js-upload-blob-form .dropzone').get(0).dropzone;
+    this.replaceFileButton = $('#submit-all');
+  });
+
+  describe('submit button', () => {
+    it('requires file', () => {
+      spyOn(window, 'alert');
+
+      this.replaceFileButton.click();
+
+      expect(window.alert).toHaveBeenCalled();
+    });
+
+    it('is disabled while uploading', () => {
+      spyOn(window, 'alert');
+
+      const file = {
+        name: 'some-file.jpg',
+        type: 'jpg',
+      };
+      const fakeEvent = jQuery.Event('drop', {
+        dataTransfer: { files: [file] },
+      });
+
+      this.dropzone.listeners[0].events.drop(fakeEvent);
+      this.replaceFileButton.click();
+
+      expect(window.alert).not.toHaveBeenCalled();
+      expect(this.replaceFileButton.is(':disabled')).toEqual(true);
+    });
+  });
+});