Change the replace placeholder to use the filename

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

app/assets/javascripts/blob/blob_file_dropzone.js.coffee

@@ -20,27 +20,42 @@ class @BlobFileDropzone
       headers:
         "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")
-      success: (header, response) ->
-        window.location.href = response.filePath
+      init: ->
+        this.on 'addedfile', (file) ->
+          $('.dropzone-alerts').html('').hide()
+          commit_message = form.find('#commit_message')[0]
+
+          if /^Upload/.test(commit_message.placeholder)
+            commit_message.placeholder = 'Upload ' + file.name
+
           return
-      error: (temp, errorMessage) ->
-        stripped = $("<div/>").html(errorMessage).text();
-        $('.dropzone-alerts').html('Error uploading file: \"' + stripped + '\"').show()
+        this.on 'removedfile', (file) ->
+          commit_message = form.find('#commit_message')[0]
+
+          if /^Upload/.test(commit_message.placeholder)
+            commit_message.placeholder = 'Upload new file'
+
           return
-      maxfilesexceeded: (file) ->
-        @removeFile file
+        this.on 'success', (header, response) ->
+          window.location.href = response.filePath
           return
-      removedfile: (file) ->
-        $('.dropzone-previews')[0].removeChild(file.previewTemplate)
-        $('.dropzone-alerts').html('').hide()
-        return true
-      sending: (file, xhr, formData) ->
+        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
     )
     submitButton = form.find('#submit-all')[0]

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

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

app/views/projects/blob/_replace.html.haml

-#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 & 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')

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 & 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}')

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'

features/project/source/browse_files.feature

@@ -38,8 +38,8 @@ Feature: Project Source Browse Files
   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"

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