fixes locale, fixes custom file upload style

app/assets/javascripts/repositories/forms/repository_item_edit.js

@@ -185,21 +185,22 @@
    */
   function changeToInputFileField(object, name, value, id) {
     var fileName    = (value.file_file_name) ? value.file_file_name : "";
-    var buttonLabel = "Choose File";
+    var buttonLabel = I18n.t('general.file.choose');
     var html        = "<div class='repository-input-file-field'>" +
-      "<div class='form-group'><input type='file' name='" + name + "' id='" +
+      "<div class='form-group'><div><input type='file' name='" + name + "' id='" +
       id + "' style='display:none' /><button class='btn btn-default' " +
       "data-object='" + object + "' name='" + name + "' value='" + value +
       "' data-id='" + id + "'>" + buttonLabel +
-      "</button>&nbsp;<i class='file-name-label'>" + fileName + "</o></div>";
+      "</button></div><div><p class='file-name-label'>" + fileName +
+      "</p></div>";
     if(fileName.length > 0) {
-      html += "<a data-action='removeAsset' ";
+      html += "<div><a data-action='removeAsset' ";
       html += "onClick='clearFileInput(this)'><i class='fas fa-times'></i></a>";
     } else {
-      html += "<a data-action='removeAsset' onClick='clearFileInput(this)' ";
+      html += "<div><a data-action='removeAsset' onClick='clearFileInput(this)' ";
       html += "style='display:none'><i class='fas fa-times'></i></a>";
     }
-    html += "</div>";
+    html += "</div></div></div>";
 
     return html;
   }
@@ -306,7 +307,8 @@
   function initFileHandler($inputField) {
     $inputField.on('change', function() {
       var input = $(this);
-      var $label = $($(this).parent().find('.file-name-label')[0]);
+      var $label = $($(this).closest('.repository-input-file-field')
+                            .find('.file-name-label')[0]);
       var file   = this.files[0];
       if (file) {
         $label.text(file.name);

app/assets/javascripts/repositories/repository_datatable.js.erb

@@ -812,9 +812,18 @@ var RepositoryDatatable = (function(global) {
               var input = $(selectedRecord).find('input[name=' + key + ']');
               if (input) {
                 var message = Array.isArray(val.data) ? val.data[0] : val.data;
-                input.closest('.form-group').addClass('has-error');
+                // handle custom input field
-                input.parent().append("<span class='help-block'>" +
+                if(input.attr('type') === 'file') {
-                                      message + '<br /></span>');
+                  var container = input.closest('.repository-input-file-field');
+                  $(container.find('.form-group')[0]).addClass('has-error');
+                  container.addClass('has-error');
+                  container.append("<span class='help-block'>" +
+                                   message + '<br /></span>');
+                } else {
+                  input.closest('.form-group').addClass('has-error');
+                  input.parent().append("<span class='help-block'>" +
+                                        message + '<br /></span>');
+                }
               }
             });
           });
@@ -1086,6 +1095,9 @@ var RepositoryDatatable = (function(global) {
     $(input).attr('remove', true);
     // clear fileName
     $(parent.find('.file-name-label')[0]).text('');
+    $(parent.find('.form-group')[0]).removeClass('has-error');
+    parent.removeClass('has-error');
+    $(parent.find('.help-block')[0]).remove();
   }
 
   // Takes an object and creates custom html element

app/assets/stylesheets/themes/repositories.scss

@@ -40,10 +40,39 @@
 }
 
 .repository-input-file-field {
-  border: 1px solid $color-alto;
+  .form-group {
-  border-radius: 5px;
+    align-items: baseline;
-  display: inline-flex;
+    border: 1px solid $color-alto;
-  padding: 2px;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .form-group.has-error {
+    border-color: $state-danger-border;
+  }
+
+  button {
+    height: 22px;
+    margin: 5px;
+    padding: 2px 10px;
+  }
+
+  i.fas {
+    margin-top: 10px;
+    padding-right: 5px;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .file-name-label {
+    padding-left: 5px;
+    padding-right: 5px;
+    margin-bottom: 0px;
+  }
 
   a {
     color: $brand-danger;

config/locales/en.yml

@@ -1914,6 +1914,7 @@ en:
     private: "private"
     search: "Search"
     file:
+      choose: "Choose File"
       processing: "File is still being processed and cannot be downloaded yet."
       total_size: "You can upload max %{size} MB of files at one time. Please remove one or more files and try to submit again."
       size_exceeded: "File size must be less than %{file_size} MB."