Add the ability to clear the file input before form submit avo-hq#3164

app/assets/stylesheets/avo.base.css

@@ -19,6 +19,7 @@
 @import './css/scrollbar.css';
 @import './css/sidebar.css';
 @import './css/spinner.css';
+@import './css/remove-icon.css';
 
 @import './css/fields/status.css';
 @import './css/fields/code.css';

app/assets/stylesheets/css/remove-icon.css

@@ -0,0 +1,10 @@
+.remove-icon {
+  top: 5px; 
+  right: 5px; 
+  font-size: 18px;
+  color: #ff0000;
+  cursor: pointer;
+  border-radius: 50%;
+  padding: 2px 6px;
+  z-index: 10;
+}

app/components/avo/fields/files_field/edit_component.html.erb

@@ -2,17 +2,24 @@
   <%= render Avo::Fields::Common::Files::ListViewerComponent.new(field: @field, resource: @resource) if @field.value.present? %>
 
   <% if can_upload_file? %>
-    <div class="mt-2">
+    <div class="mt-2" data-controller="file-field" data-file-field-target="previewContainer">
+     <div class="row align-items-center">
       <%= @form.file_field @field.id,
         accept: @field.accept,
-        data: @field.get_html(:data, view: view, element: :input),
+        data: @field.get_html(:data, view: view, element: :input)
+          .merge(action: "change->file-field#preview"),
         direct_upload: @field.direct_upload,
         disabled: disabled?,
         multiple: true,
         style: @field.get_html(:style, view: view, element: :input),
         class: "w-full",
         autofocus: @autofocus
       %>
+      <span data-file-field-target="removeIcon" 
+            class="remove-icon" 
+            data-action="click->file-field#remove" 
+            style="display: none;">&times;</span>
+    </div>
     </div>
   <% else %>
     —

app/javascript/js/controllers.js

@@ -45,6 +45,7 @@ import TippyController from './controllers/tippy_controller'
 import TiptapFieldController from './controllers/fields/tiptap_field_controller'
 import ToggleController from './controllers/toggle_controller'
 import TrixFieldController from './controllers/fields/trix_field_controller'
+import FileFieldController from './controllers/fields/files_field_controller'
 
 application.register('action', ActionController)
 application.register('actions-overflow', ActionsOverflowController)
@@ -93,5 +94,6 @@ application.register('reload-belongs-to-field', ReloadBelongsToFieldController)
 application.register('tags-field', TagsFieldController)
 application.register('trix-field', TrixFieldController)
 application.register('tiptap-field', TiptapFieldController)
+application.register("file-field", FileFieldController);
 
 // Custom controllers

app/javascript/js/controllers/fields/files_field_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ["previewContainer", "removeIcon"];
+
+  preview() {
+    this.removeIconTarget.style.display = "block";
+  }
+
+  remove(event) {
+    event.preventDefault();
+    const fileInput = this.previewContainerTarget.querySelector('input[type="file"]');
+    fileInput.value = "";
+    this.removeIconTarget.style.display = "none";
+  }
+}