diff --git a/app/components/avo/fields/file_field/edit_component.html.erb b/app/components/avo/fields/file_field/edit_component.html.erb
index b0f8405c0e..d069eaafb2 100644
--- 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"
- %>
+
+ <%= @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"
+ %>
+ ×
+
<% 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
index eebbac70ae..39bc568588 100644
--- a/app/components/avo/fields/files_field/edit_component.html.erb
+++ b/app/components/avo/fields/files_field/edit_component.html.erb
@@ -2,10 +2,11 @@
<%= render Avo::Fields::Common::Files::ListViewerComponent.new(field: @field, resource: @resource) if @field.value.present? %>
<% if can_upload_file? %>
-
+
<%= @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,
@@ -13,6 +14,10 @@
class: "w-full",
autofocus: @autofocus
%>
+ ×
<% else %>
—
diff --git a/app/javascript/js/controllers.js b/app/javascript/js/controllers.js
index ff30529b03..58d3ac0f62 100644
--- 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
new file mode 100644
index 0000000000..6103cce153
--- /dev/null
+++ 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";
+ }
+}