Refactor AvatarPicker into a generic FilePicker

We want to use the same functionality and styling in the import file
picker, so refactor the AvatarPicker into a generic FilePicker so that
this can be easily reused.

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/29271

app/assets/javascripts/avatar_picker.js

-import $ from 'jquery';
-
-export default function initAvatarPicker() {
-  $('.js-choose-avatar-button').on('click', function onClickAvatar() {
-    const form = $(this).closest('form');
-    return form.find('.js-avatar-input').click();
-  });
-
-  $('.js-avatar-input').on('change', function onChangeAvatarInput() {
-    const form = $(this).closest('form');
-    const filename = $(this)
-      .val()
-      .replace(/^.*[\\\/]/, ''); // eslint-disable-line no-useless-escape
-    return form.find('.js-avatar-filename').text(filename);
-  });
-}

app/assets/javascripts/file_pickers.js

+export default function initFilePickers() {
+  const filePickers = document.querySelectorAll('.js-filepicker');
+
+  filePickers.forEach(filePicker => {
+    const button = filePicker.querySelector('.js-filepicker-button');
+
+    button.addEventListener('click', () => {
+      const form = button.closest('form');
+      form.querySelector('.js-filepicker-input').click();
+    });
+
+    const input = filePicker.querySelector('.js-filepicker-input');
+
+    input.addEventListener('change', () => {
+      const form = input.closest('form');
+      const filename = input.value.replace(/^.*[\\\/]/, ''); // eslint-disable-line no-useless-escape
+
+      form.querySelector('.js-filepicker-filename').textContent = filename;
+    });
+  });
+}

app/assets/javascripts/pages/admin/groups/edit/index.js

-import initAvatarPicker from '~/avatar_picker';
+import initFilePickers from '~/file_pickers';
 
-document.addEventListener('DOMContentLoaded', initAvatarPicker);
+document.addEventListener('DOMContentLoaded', initFilePickers);

app/assets/javascripts/pages/admin/groups/new/index.js

 import BindInOut from '../../../../behaviors/bind_in_out';
 import Group from '../../../../group';
-import initAvatarPicker from '~/avatar_picker';
+import initFilePickers from '~/file_pickers';
 
 document.addEventListener('DOMContentLoaded', () => {
   BindInOut.initAll();
-  initAvatarPicker();
+  initFilePickers();
 
   return new Group();
 });

app/assets/javascripts/pages/groups/edit/index.js

-import initAvatarPicker from '~/avatar_picker';
+import initFilePickers from '~/file_pickers';
 import TransferDropdown from '~/groups/transfer_dropdown';
 import initConfirmDangerModal from '~/confirm_danger_modal';
 import initSettingsPanels from '~/settings_panels';
@@ -10,7 +10,7 @@ import groupsSelect from '~/groups_select';
 import projectSelect from '~/project_select';
 
 document.addEventListener('DOMContentLoaded', () => {
-  initAvatarPicker();
+  initFilePickers();
   initConfirmDangerModal();
   initSettingsPanels();
   dirtySubmitFactory(

app/assets/javascripts/pages/groups/new/index.js

 import $ from 'jquery';
 import BindInOut from '~/behaviors/bind_in_out';
 import Group from '~/group';
-import initAvatarPicker from '~/avatar_picker';
 import GroupPathValidator from './group_path_validator';
+import initFilePickers from '~/file_pickers';
 
 document.addEventListener('DOMContentLoaded', () => {
   const parentId = $('#group_parent_id');
@@ -10,7 +10,7 @@ document.addEventListener('DOMContentLoaded', () => {
     new GroupPathValidator(); // eslint-disable-line no-new
   }
   BindInOut.initAll();
-  initAvatarPicker();
+  initFilePickers();
 
   return new Group();
 });

app/assets/javascripts/pages/projects/edit/index.js

@@ -4,12 +4,12 @@ import setupTransferEdit from '~/transfer_edit';
 import initConfirmDangerModal from '~/confirm_danger_modal';
 import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
 import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory';
-import initAvatarPicker from '~/avatar_picker';
+import initFilePickers from '~/file_pickers';
 import initProjectLoadingSpinner from '../shared/save_project_loader';
 import initProjectPermissionsSettings from '../shared/permissions';
 
 document.addEventListener('DOMContentLoaded', () => {
-  initAvatarPicker();
+  initFilePickers();
   initConfirmDangerModal();
   initSettingsPanels();
   mountBadgeSettings(PROJECT_BADGE);

app/views/groups/_import_group_pane.html.haml

@@ -42,8 +42,8 @@
   .row
     .form-group.col-sm-12
       = f.label :file, s_('GroupsNew|GitLab group export'), class: 'label-bold'
-      .form-group
-        = f.file_field :file
+      %div
+        = render 'shared/file_picker_button', f: f, field: :file, help_text: nil
 
   .row
     .form-actions.col-sm-12

app/views/shared/_choose_avatar_button.html.haml

-%button.btn.js-choose-avatar-button{ type: 'button' }= _("Choose file…")
-%span.file_name.js-avatar-filename= _("No file chosen")
-= f.file_field :avatar, class: "js-avatar-input hidden"
-.form-text.text-muted= _("The maximum file size allowed is 200KB.")
+= render 'shared/file_picker_button', f: f, field: :avatar, help_text: _("The maximum file size allowed is 200KB.")

app/views/shared/_file_picker_button.html.haml

+%span.js-filepicker
+  %button.btn.js-filepicker-button{ type: 'button' }= _("Choose file…")
+  %span.file_name.js-filepicker-filename= _("No file chosen")
+  = f.file_field field, class: "js-filepicker-input hidden"
+  - if help_text.present?
+    .form-text.text-muted= help_text

spec/features/groups/import_export/import_file_spec.rb

@@ -33,7 +33,9 @@ describe 'Import/Export - Group Import', :js do
         find('#import-group-tab').click
 
         expect(page).to have_content 'GitLab group export'
-        attach_file('file', file)
+        attach_file(file) do
+          find('.js-filepicker-button').click
+        end
 
         expect { click_on 'Import group' }.to change { Group.count }.by 1
 
@@ -54,7 +56,9 @@ describe 'Import/Export - Group Import', :js do
         find('#import-group-tab').click
 
         fill_in :import_group_path, with: 'custom-path'
-        attach_file('file', file)
+        attach_file(file) do
+          find('.js-filepicker-button').click
+        end
 
         expect { click_on 'Import group' }.to change { Group.count }.by 1
 
@@ -86,7 +90,9 @@ describe 'Import/Export - Group Import', :js do
 
       fill_in :group_name, with: 'Test Group Import'
       find('#import-group-tab').click
-      attach_file('file', file)
+      attach_file(file) do
+        find('.js-filepicker-button').click
+      end
 
       expect { click_on 'Import group' }.not_to change { Group.count }