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

avo-hq · Aug 24, 2024 · 97117c3 · 97117c3
1 parent 4a7798b
commit 97117c3
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 11 deletions.
diff --git a/app/components/avo/fields/file_field/edit_component.html.erb b/app/components/avo/fields/file_field/edit_component.html.erb
@@ -6,15 +6,22 @@
   <% end %>
 
   <% if can_upload_file? %>
-    <%= @form.file_field @field.id,
-      accept: @field.accept,
-      data: @field.get_html(:data, view: view, element: :input),
-      direct_upload: @field.direct_upload,
-      disabled: disabled?,
-      style: @field.get_html(:style, view: view, element: :input),
-      autofocus: @autofocus,
-      class: "w-full"
-    %>
+   <div class="mt-2 flex items-center" data-controller="file-field" data-file-field-target="previewContainer">
+      <%= @form.file_field @field.id,
+        accept: @field.accept,
+        data: @field.get_html(:data, view: view, element: :input)
+          .merge(action: "change->file-field#preview"),
+        direct_upload: @field.direct_upload,
+        disabled: disabled?,
+        style: @field.get_html(:style, view: view, element: :input),
+        autofocus: @autofocus,
+        class: "w-full"
+      %>
+      <span data-file-field-target="removeIcon" 
+                class="remove-icon text-red-500 cursor-pointer"
+              data-action="click->file-field#remove" 
+              style="display: none;">&times;</span>
+    </div>
   <% else %>
     —
   <% end %>

diff --git a/app/components/avo/fields/files_field/edit_component.html.erb b/app/components/avo/fields/files_field/edit_component.html.erb
@@ -2,17 +2,22 @@
   <%= 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 flex items-center" data-controller="file-field" data-file-field-target="previewContainer">
       <%= @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="text-red-500 cursor-pointer"
+            data-action="click->file-field#remove" 
+            style="display: none;">&times;</span>
     </div>
   <% else %>
     —

diff --git a/app/javascript/js/controllers.js b/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
diff --git a/app/javascript/js/controllers/fields/files_field_controller.js b/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";
+  }
+}