Merge pull request #9636 from demarches-simplifiees/9530-remove-piece-jointe

can reset file input in messagerie

app/javascript/controllers/file_input_reset_controller.ts

@@ -0,0 +1,37 @@
+import { ApplicationController } from './application_controller';
+import { hide, show } from '@utils';
+
+export class FileInputResetController extends ApplicationController {
+  static targets = ['reset'];
+
+  declare readonly resetTarget: HTMLElement;
+
+  connect() {
+    this.on('change', (event) => {
+      if (event.target == this.fileInput) {
+        this.showResetButton();
+      }
+    });
+  }
+
+  reset(event: Event) {
+    event.preventDefault();
+    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

@@ -8,8 +8,10 @@
 
   = 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
+  .fr-mt-3w{ data: { controller: "file-input-reset" } }
     = 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

@@ -21,3 +21,5 @@ fr:
         already_user: 'J’ai déjà un compte'
         create: 'Créer un compte'
         signin: 'Se connecter'
+      messages:
+        remove_file: 'Supprimer le fichier'