can reset file input in messagerie

app/javascript/controllers/file_input_reset_controller.ts

@@ -0,0 +1,19 @@
+import { ApplicationController } from './application_controller';
+import { hide, show } from '@utils';
+
+export class FileInputResetController extends ApplicationController {
+  static targets = ['input', 'reset'];
+
+  declare readonly inputTarget: HTMLInputElement;
+  declare readonly resetTarget: HTMLElement;
+
+  reset(event: Event) {
+    event.preventDefault();
+    this.inputTarget.value = '';
+    hide(this.resetTarget);
+  }
+
+  showResetButton() {
+    show(this.resetTarget);
+  }
+}

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

@@ -8,8 +8,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
-    = render Attachment::EditComponent.new(attached_file: commentaire.piece_jointe)
+  .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' }
 
   .fr-mt-3w
     = f.submit t('views.shared.dossiers.messages.form.send_message'), class: 'fr-btn', data: { disable: true }

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: 'Supprime le fichier'