Feature: Add the ability to clear the file input before form submit #…

…3164 (#3193) * Add the ability to clear the file input before form submit #3164 * refactor * localization * fix localization --------- Co-authored-by: Paul Bob <[email protected]> Co-authored-by: Paul Bob <[email protected]>
avo-hq · Nov 1, 2024 · f9634c3 · f9634c3
1 parent 9dccf2a
commit f9634c3
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 20 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,34 @@
   <% 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 data-controller="clear-input">
+      <div class="mt-2 flex items-center">
+        <%= @form.file_field @field.id,
+          accept: @field.accept,
+          data: @field.get_html(:data, view: view, element: :input)
+            .merge(
+              action: "change->clear-input#showClearButton",
+              clear_input_target: "input"
+            ),
+          direct_upload: @field.direct_upload,
+          disabled: disabled?,
+          style: @field.get_html(:style, view: view, element: :input),
+          autofocus: @autofocus,
+          class: "w-full"
+        %>
+      </div>
+      <%= content_tag :button,
+          class: "self-center hidden font-semibold text-xs text-red-600 p-1",
+          id: :reset,
+          type: :button,
+          data: {
+            clear_input_target: "clearButton",
+            action: "click->clear-input#clearInput",
+            tippy: :tooltip
+          } do %>
+        <% t("avo.clear_value") %>
+      <% end %>
+    </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,33 @@
   <%= render Avo::Fields::Common::Files::ListViewerComponent.new(field: @field, resource: @resource) if @field.value.present? %>
 
   <% if can_upload_file? %>
-    <div class="mt-2">
-      <%= @form.file_field @field.id,
-        accept: @field.accept,
-        data: @field.get_html(:data, view: view, element: :input),
-        direct_upload: @field.direct_upload,
-        disabled: disabled?,
-        multiple: true,
-        style: @field.get_html(:style, view: view, element: :input),
-        class: "w-full",
-        autofocus: @autofocus
-      %>
+    <div data-controller="clear-input">
+      <div class="mt-2 flex items-center">
+        <%= @form.file_field @field.id,
+          accept: @field.accept,
+          data: @field.get_html(:data, view: view, element: :input)
+            .merge(
+              action: "change->clear-input#showClearButton",
+              clear_input_target: "input"
+            ),
+          direct_upload: @field.direct_upload,
+          disabled: disabled?,
+          multiple: true,
+          style: @field.get_html(:style, view: view, element: :input),
+          autofocus: @autofocus
+        %>
+      </div>
+      <%= content_tag :button,
+          class: "self-center hidden font-semibold text-xs text-red-600 p-1",
+          id: :reset,
+          type: :button,
+          data: {
+            clear_input_target: "clearButton",
+            action: "click->clear-input#clearInput",
+            tippy: :tooltip
+          } do %>
+        <% t("avo.clear_value") %>
+      <% end %>
     </div>
   <% else %>
     —

diff --git a/app/javascript/js/controllers.js b/app/javascript/js/controllers.js
@@ -7,6 +7,7 @@ import AttachmentsController from './controllers/attachments_controller'
 import BelongsToFieldController from './controllers/fields/belongs_to_field_controller'
 import BooleanFilterController from './controllers/boolean_filter_controller'
 import CardFiltersController from './controllers/card_filters_controller'
+import ClearInputController from './controllers/fields/clear_input_controller'
 import CodeFieldController from './controllers/fields/code_field_controller'
 import CopyToClipboardController from './controllers/copy_to_clipboard_controller'
 import DashboardCardController from './controllers/dashboard_card_controller'
@@ -52,6 +53,7 @@ application.register('actions-picker', ActionsPickerController)
 application.register('attachments', AttachmentsController)
 application.register('boolean-filter', BooleanFilterController)
 application.register('card-filters', CardFiltersController)
+application.register('clear-input', ClearInputController)
 application.register('copy-to-clipboard', CopyToClipboardController)
 application.register('dashboard-card', DashboardCardController)
 application.register('date-time-filter', DateTimeFilterController)

diff --git a/app/javascript/js/controllers/fields/clear_input_controller.js b/app/javascript/js/controllers/fields/clear_input_controller.js
@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['input', 'clearButton']
+
+  showClearButton() {
+    this.clearButtonTarget.classList.remove('hidden')
+  }
+
+  clearInput() {
+    this.inputTarget.value = ''
+    this.clearButtonTarget.classList.add('hidden')
+  }
+}