Change the replace placeholder to use the filenamefix-upload-ui

Dynamically adjust placedholder for uploads and fix Dropzone event handlers

Override error handler to prevent error messages from being inserted underneath image preview

Fix tests

Use regexp instead of startsWith for better browser compatibility

Remove duplicate code in _replace.html.haml and use one template

Remove files upon error and retain alert messages until user adds a new file

8 files changed, 58 insertions, 60 deletions

diff --git a/app/assets/javascripts/blob/blob_file_dropzone.js.coffee b/app/assets/javascripts/blob/blob_file_dropzone.js.coffee
index 090af9bb376..3ab3ba66754 100644
--- a/app/assets/javascripts/blob/blob_file_dropzone.js.coffee
+++ b/app/assets/javascripts/blob/blob_file_dropzone.js.coffee
@@ -20,26 +20,41 @@ class @BlobFileDropzone
       headers:
         "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")
 
-      success: (header, response) ->
-        window.location.href = response.filePath
-        return
+      init: ->
+        this.on 'addedfile', (file) ->
+          $('.dropzone-alerts').html('').hide()
+          commit_message = form.find('#commit_message')[0]
 
-      error: (temp, errorMessage) ->
-        stripped = $("<div/>").html(errorMessage).text();
-        $('.dropzone-alerts').html('Error uploading file: \"' + stripped + '\"').show()
-        return
+          if /^Upload/.test(commit_message.placeholder)
+            commit_message.placeholder = 'Upload ' + file.name
 
-      maxfilesexceeded: (file) ->
-        @removeFile file
-        return
+          return
+
+        this.on 'removedfile', (file) ->
+          commit_message = form.find('#commit_message')[0]
 
-      removedfile: (file) ->
-        $('.dropzone-previews')[0].removeChild(file.previewTemplate)
-        $('.dropzone-alerts').html('').hide()
-        return true
+          if /^Upload/.test(commit_message.placeholder)
+            commit_message.placeholder = 'Upload new file'
 
-      sending: (file, xhr, formData) ->
-        formData.append('commit_message', form.find('#commit_message').val())
+          return
+
+        this.on 'success', (header, response) ->
+          window.location.href = response.filePath
+          return
+
+        this.on 'maxfilesexceeded', (file) ->
+          @removeFile file
+          return
+
+        this.on 'sending', (file, xhr, formData) ->
+          formData.append('commit_message', form.find('#commit_message').val())
+          return
+
+      # Override behavior of adding error underneath preview
+      error: (file, errorMessage) ->
+        stripped = $("<div/>").html(errorMessage).text();
+        $('.dropzone-alerts').html('Error uploading file: \"' + stripped + '\"').show()
+        @removeFile file
         return
     )
 
diff --git a/app/controllers/projects/blob_controller.rb b/app/controllers/projects/blob_controller.rb
index 8776721d243..d7be212c33a 100644
--- a/app/controllers/projects/blob_controller.rb
+++ b/app/controllers/projects/blob_controller.rb
@@ -18,6 +18,12 @@ class Projects::BlobController < Projects::ApplicationController
   before_action :after_edit_path, only: [:edit, :update]
 
   def new
+    @title = 'Upload'
+    @placeholder = 'Upload new file'
+    @button_title = 'Upload file'
+    @form_path = namespace_project_create_blob_path(@project.namespace, @project, @id)
+    @method = :post
+
     commit unless @repository.empty?
   end
 
@@ -40,6 +46,11 @@ class Projects::BlobController < Projects::ApplicationController
   end
 
   def show
+    @title = "Replace #{@blob.name}"
+    @placeholder = @title
+    @button_title = 'Replace file'
+    @form_path = namespace_project_update_blob_path(@project.namespace, @project, @id)
+    @method = :put
   end
 
   def edit
diff --git a/app/views/projects/blob/_actions.html.haml b/app/views/projects/blob/_actions.html.haml
index 131818d2a83..373b3a0c5b0 100644
--- a/app/views/projects/blob/_actions.html.haml
+++ b/app/views/projects/blob/_actions.html.haml
@@ -18,5 +18,5 @@
 
 - if allowed_tree_edit?
   .btn-group{ role: "group" }
-    %button.btn.btn-default{ 'data-target' => '#modal-replace-blob', 'data-toggle' => 'modal' } Replace
+    %button.btn.btn-default{ 'data-target' => '#modal-upload-blob', 'data-toggle' => 'modal' } Replace
     %button.btn.btn-remove{ 'data-target' => '#modal-remove-blob', 'data-toggle' => 'modal' } Remove
diff --git a/app/views/projects/blob/_replace.html.haml b/app/views/projects/blob/_replace.html.haml
deleted file mode 100644
index ed584d19ed7..00000000000
--- a/app/views/projects/blob/_replace.html.haml
+++ /dev/null
@@ -1,28 +0,0 @@
-#modal-replace-blob.modal
-  .modal-dialog
-    .modal-content
-      .modal-header
-        %a.close{href: "#", "data-dismiss" => "modal"} ×
-        %h3.page-title Replace #{@blob.name}
-        %p.light
-          From branch
-          %strong= @ref
-      .modal-body
-        = form_tag namespace_project_update_blob_path(@project.namespace, @project, @id), method: :put, class: 'blob-file-upload-form-js form-horizontal' do
-          .dropzone
-            .dropzone-previews.blob-upload-dropzone-previews
-              %p.dz-message.light
-                Attach a file by drag &amp; drop or
-                = link_to 'click to upload', '#', class: "markdown-selector"
-          %br
-          .dropzone-alerts{class: "alert alert-danger data", "data-dismiss" => "alert", style: "display:none"}
-          = render 'shared/commit_message_container', params: params,
-            placeholder: 'Replace file'
-          .form-group
-            .col-sm-offset-2.col-sm-10
-              = button_tag 'Replace file', class: 'btn btn-small btn-primary btn-replace-file', id: 'submit-all'
-              = link_to "Cancel", '#', class: "btn btn-cancel", "data-dismiss" => "modal"
-
-:coffeescript
-  disableButtonIfEmptyField $('.blob-file-upload-form-js').find('#commit_message'), '.btn-replace-file'
-  new BlobFileDropzone($('.blob-file-upload-form-js'), 'put')
diff --git a/app/views/projects/blob/_upload.html.haml b/app/views/projects/blob/_upload.html.haml
index 4ed36cb8aa0..2cfb79486dc 100644
--- a/app/views/projects/blob/_upload.html.haml
+++ b/app/views/projects/blob/_upload.html.haml
@@ -3,26 +3,26 @@
     .modal-content
       .modal-header
         %a.close{href: "#", "data-dismiss" => "modal"} ×
-        %h3.page-title Upload
+        %h3.page-title #{@title}
         %p.light
           From branch
           %strong= @ref
       .modal-body
-        = form_tag namespace_project_create_blob_path(@project.namespace, @project, @id), method: :post, class: 'blob-file-upload-form-js form-horizontal' do
+        = form_tag @form_path, method: @method, class: 'blob-file-upload-form-js form-horizontal' do
           .dropzone
             .dropzone-previews.blob-upload-dropzone-previews
               %p.dz-message.light
                 Attach a file by drag &amp; drop or
                 = link_to 'click to upload', '#', class: "markdown-selector"
           %br
-          .dropzone-alerts{class: "alert alert-danger data", "data-dismiss" => "alert", style: "display:none"}
+          .dropzone-alerts{class: "alert alert-danger data", style: "display:none"}
           = render 'shared/commit_message_container', params: params,
-            placeholder: 'Upload new file'
+            placeholder: @placeholder
           .form-group
             .col-sm-offset-2.col-sm-10
-              = button_tag 'Upload file', class: 'btn btn-small btn-primary btn-upload-file', id: 'submit-all'
+              = button_tag @button_title, class: 'btn btn-small btn-primary btn-upload-file', id: 'submit-all'
               = link_to "Cancel", '#', class: "btn btn-cancel", "data-dismiss" => "modal"
 
 :coffeescript
   disableButtonIfEmptyField $('.blob-file-upload-form-js').find('#commit_message'), '.btn-upload-file'
-  new BlobFileDropzone($('.blob-file-upload-form-js'), 'post')
+  new BlobFileDropzone($('.blob-file-upload-form-js'), '#{@method}')
diff --git a/app/views/projects/blob/show.html.haml b/app/views/projects/blob/show.html.haml
index 19e876ec34c..4e66a43bbd5 100644
--- a/app/views/projects/blob/show.html.haml
+++ b/app/views/projects/blob/show.html.haml
@@ -10,4 +10,4 @@
 
 - if allowed_tree_edit?
   = render 'projects/blob/remove'
-  = render 'projects/blob/replace'
+  = render 'projects/blob/upload'
diff --git a/features/project/source/browse_files.feature b/features/project/source/browse_files.feature
index b5b6abe6aff..58574166ef3 100644
--- a/features/project/source/browse_files.feature
+++ b/features/project/source/browse_files.feature
@@ -33,13 +33,13 @@ Feature: Project Source Browse Files
     And I click on "Commit Changes"
     Then I am redirected to the new file
     And I should see its new content
-    
+
   @javascript
   Scenario: I can upload file and commit
     Given I click on "new file" link in repo
     Then I can see new file page
-    And I can see "upload existing one"
-    And I click on "upload existing one"
+    And I can see "upload an existing one"
+    And I click on "upload"
     And I upload a new text file
     And I fill the upload file commit message
     And I click on "Upload file"
diff --git a/features/steps/project/source/browse_files.rb b/features/steps/project/source/browse_files.rb
index 7a0ee4df45e..a1a49dd58a6 100644
--- a/features/steps/project/source/browse_files.rb
+++ b/features/steps/project/source/browse_files.rb
@@ -119,12 +119,12 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
     expect(page).to have_content "Commit message"
   end
 
-  step 'I can see "upload existing one"' do
-    expect(page).to have_content "upload existing one"
+  step 'I can see "upload an existing one"' do
+    expect(page).to have_content "upload an existing one"
   end
 
-  step 'I click on "upload existing one"' do
-    click_link 'upload existing one'
+  step 'I click on "upload"' do
+    click_link 'upload'
   end
 
   step 'I click on "Upload file"' do
@@ -150,7 +150,7 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
   end
 
   step 'I fill the replace file commit message' do
-    page.within('#modal-replace-blob') do
+    page.within('#modal-upload-blob') do
       fill_in :commit_message, with: 'Replacement file commit message'
     end
   end