refactor to use event delegation

app/javascript/controllers/file_input_reset_controller.ts

@@ -2,18 +2,36 @@ import { ApplicationController } from './application_controller';
 import { hide, show } from '@utils';
 
 export class FileInputResetController extends ApplicationController {
-  static targets = ['input', 'reset'];
+  static targets = ['reset'];
 
-  declare readonly inputTarget: HTMLInputElement;
   declare readonly resetTarget: HTMLElement;
 
+  connect() {
+    this.on('change', (event) => {
+      if (event.target == this.fileInput) {
+        this.showResetButton();
+      }
+    });
+  }
+
   reset(event: Event) {
     event.preventDefault();
-    this.inputTarget.value = '';
+    this.fileInput.value = '';
     hide(this.resetTarget);
   }
 
   showResetButton() {
     show(this.resetTarget);
   }
+
+  private get fileInput() {
+    const inputs =
+      this.element.querySelectorAll<HTMLInputElement>('input[type="file"]');
+    if (inputs.length == 0) {
+      throw new Error('No file input found');
+    } else if (inputs.length > 1) {
+      throw new Error('Multiple file inputs found');
+    }
+    return inputs[0];
+  }
 }

app/views/shared/dossiers/messages/_form.html.haml

@@ -9,8 +9,9 @@
   = render Dsfr::InputComponent.new(form: f, attribute: :body, input_type: :text_area, opts: { rows: 5, placeholder: placeholder, title: placeholder, class: 'fr-input message-textarea'})
 
   .fr-mt-3w{ data: { controller: "file-input-reset" } }
-    %button.hidden.fr-btn.fr-btn--tertiary.fr-btn--sm.fr-icon-delete-line.fr-mr-1w{ 'aria-label': t('views.shared.messages.remove_file'), data: { 'file-input-reset-target': 'reset', action: 'file-input-reset#reset' } }
-    = f.file_field :piece_jointe, direct_upload: true, data: { 'file-input-reset-target': 'input', action: 'change->file-input-reset#showResetButton' }
+    = render Attachment::EditComponent.new(attached_file: commentaire.piece_jointe)
+    %button.hidden.fr-btn.fr-btn--tertiary-no-outline.fr-btn--icon-left.fr-icon-delete-line{ data: { 'file-input-reset-target': 'reset', action: 'file-input-reset#reset' } }
+      = t('views.shared.messages.remove_file')
 
   .fr-mt-3w
     = f.submit t('views.shared.dossiers.messages.form.send_message'), class: 'fr-btn', data: { disable: true }

config/locales/views/shared/en.yml

@@ -21,3 +21,5 @@ en:
         already_user: "I already have an account"
         create: 'Create an account'
         signin: 'Sign in'
+      messages:
+        remove_file: 'Remove file'

config/locales/views/shared/fr.yml

@@ -22,4 +22,4 @@ fr:
         create: 'Créer un compte'
         signin: 'Se connecter'
       messages:
-        remove_file: 'Supprime le fichier'
+        remove_file: 'Supprimer le fichier'