formstrap 0.1.2 → 0.2.0

data/app/controllers/formstrap/media_controller.rb

@@ -3,14 +3,11 @@ class Formstrap::MediaController < FormstrapController
   layout false
 
   def index
-    @blobs =
-      ActiveStorage::Blob
-        .not_attached_to_variant
-        .by_mimetypes_string(media_params[:mimetype])
-        .order(created_at: :desc)
-        .group(:id)
-        .all
-    @blobs = paginate(@blobs)
+    blobs = ActiveStorage::Blob
+    blobs = filter(blobs)
+    blobs = sort(blobs)
+    blobs = blobs.group(:id)
+    @blobs = paginate(blobs)
     @mimetypes = media_params[:mimetype]
 
     respond_to do |format|
@@ -37,32 +34,53 @@ class Formstrap::MediaController < FormstrapController
     @blob = ActiveStorage::Blob.find(params[:id])
   end
 
-  def update
-    @blob = ActiveStorage::Blob.find(params[:id])
-    media_item_params[:filename] = media_item_params[:filename] + "." + @blob.filename.to_s.rpartition(".").last
-    if @blob.update(media_item_params)
-      flash.now[:notice] = t("admin.flash.updated", name: @blob.filename)
-    end
-  end
-
   def thumbnail
     @blob = ActiveStorage::Blob.find(params[:id])
   end
 
   private
 
+  def filter(blobs)
+    blobs = filter_unattached(blobs)
+    blobs = filter_by_mimetype(blobs, media_params[:mimetype]) if media_params[:mimetype].present?
+    blobs = filter_excluded_models(blobs, media_params[:exclude_models]) if media_params[:exclude_models].present?
+    blobs = filter_search(blobs, media_params[:search]) if media_params[:search].present?
+    blobs
+  end
+
+  def filter_unattached(blobs)
+    blobs.not_attached_to_variant
+  end
+
+  def filter_by_mimetype(blobs, mimetype)
+    blobs.by_mimetypes_string(mimetype)
+  end
+
+  def filter_excluded_models(blobs, model_names = [])
+    blobs.not_attached_to(model_names)
+  end
+
+  def filter_search(blobs, string)
+    blobs.search(string)
+  end
+
+  def sort(blobs)
+    blobs.order(created_at: :desc)
+  end
+
   def media_params
     params.permit(
-      :min,
       :max,
-      :name,
       :mimetype,
+      :min,
+      :name,
+      :search,
+      :page,
+      :page_start,
+      :per_page,
       ids: [],
-      files: []
+      files: [],
+      exclude_models: []
     )
   end
-
-  def media_item_params
-    params.require(:blob).permit!
-  end
 end

data/app/helpers/application_helper.rb

@@ -0,0 +1,20 @@
+class ApplicationHelper
+  def show_svg(attachment, options = {})
+    return if !attachment.content_type.include?('svg')
+
+    attachment.open do |file|
+      content = file.read
+      doc = Nokogiri::HTML::DocumentFragment.parse content
+      svg = doc.at_css 'svg'
+
+      # for security
+      doc.search('script').each do |src|
+        src.remove
+      end
+
+      options.each { |attr, value| svg[attr.to_s] = value }
+
+      doc.to_html.html_safe
+    end
+  end
+end

data/app/models/concerns/formstrap/attachment.rb

@@ -0,0 +1,16 @@
+module Formstrap
+  module Attachment
+    extend ActiveSupport::Concern
+    included do
+      scope :not_a_variant, -> { where.not(record_type: "ActiveStorage::VariantRecord") }
+
+      def root_record
+        record
+      end
+
+      def root_record_name
+        "#{record.class.name} #{record.id}"
+      end
+    end
+  end
+end

data/app/models/concerns/formstrap/blob.rb

@@ -0,0 +1,56 @@
+module Formstrap
+  module Blob
+    extend ActiveSupport::Concern
+
+    included do
+      class << self
+        def search(query)
+          where("active_storage_blobs.filename LIKE ?", "%#{query}%")
+        end
+
+        def not_attached_to_variant
+          not_attached_to("ActiveStorage::VariantRecord")
+        end
+
+        def not_attached_to(arg)
+          case arg
+          when String
+            record_types = [arg]
+          when Class
+            record_types = [arg.to_s]
+          when Array
+            record_types = arg.map(&:to_s)
+          end
+
+          left_outer_joins(:attachments)
+            .where.not(active_storage_attachments: {record_type: record_types})
+            .or(is_orphan)
+        end
+
+        def by_mimetypes_string(mimetype_string)
+          return where({}) if mimetype_string.blank?
+          by_mimetypes(mimetype_string.split(","))
+        end
+
+        private
+
+        def is_orphan
+          left_outer_joins(:attachments)
+            .where(active_storage_attachments: {id: nil})
+        end
+
+        def by_mimetypes(mimetypes = [])
+          results = self
+
+          mimetypes.map.with_index do |mimetype, index|
+            content_type = mimetype.tr("*", "%")
+            query = where(arel_table[:content_type].matches(content_type))
+            results = (index == 0) ? query : results.or(query)
+          end
+
+          results
+        end
+      end
+    end
+  end
+end

data/app/models/formstrap/file_view.rb

@@ -23,7 +23,7 @@ module Formstrap
 
     def wrapper_options
       default_wrapper_options.deep_merge({
-        class: ["mb-3 h-form-file", ("form-floating" if float)],
+        class: ["mb-3 formstrap-file", ("form-floating" if float)],
         data: {
           controller: ("file-preview" if preview)
         }
@@ -57,7 +57,7 @@ module Formstrap
     def dropzone_options
       if dropzone
         {
-          class: ["h-dropzone", validation_class],
+          class: ["formstrap-dropzone", validation_class],
           data: {
             controller: "dropzone"
           }
@@ -73,7 +73,7 @@ module Formstrap
     #   {
     #     prepend: prepend,
     #     append: append,
-    #     class: "h-form-file",
+    #     class: "formstrap-file",
     #     data: {
     #       controller: "#{"file-preview" if preview} #{"dropzone" if dropzone}"
     #     }

data/app/models/formstrap/media_view.rb

@@ -30,7 +30,8 @@ module Formstrap
 
     def item_options
       options = {
-        sort: sort
+        sort: sort,
+        url: modal_url,
       }
 
       # Don't pass width or height if it was not defined
@@ -122,6 +123,16 @@ module Formstrap
       end
     end
 
+    def modal_url
+      formstrap_media_path(name: name, ids: blob_ids, min: min, max: max, mimetype: accept, exclude_models: exclude_models)
+    end
+
+    def edit_modal_url(attachment)
+      return nil unless edit_url.present?
+      return edit_url unless attachment&.persisted?
+      edit_url.gsub(":id", attachment.id.to_s)
+    end
+
     attr_reader :accept
 
     def required

data/app/models/formstrap/thumbnail_view.rb

@@ -0,0 +1,108 @@
+module Formstrap
+  class ThumbnailView < ViewModel
+    def class_names
+      class_names = [@class]
+      class_names << "img-thumbnail formstrap-thumbnail"
+      class_names.join(" ")
+    end
+
+    def width
+      if is_defined?(:width)
+        @width
+      else
+        @width || 100
+      end
+    end
+
+    def height
+      if is_defined?(:height)
+        @height
+      else
+        @height || 100
+      end
+    end
+
+    def blob
+      file.is_a?(ActiveStorage::Blob) ? file : file&.blob
+    end
+
+    def mime_type
+      blob&.content_type
+    end
+
+    def variant_options
+      if width.nil? || height.nil?
+        default_variant_options.merge({
+          resize_to_fit: [width, height]
+        })
+      else
+        default_variant_options.merge({
+          resize_to_fill: [width, height, crop: :attention]
+        })
+      end
+    end
+
+    def default_variant_options
+      {
+        saver: {
+          quality: 80
+        }
+      }
+    end
+
+    # Is it possible to create a ActiveStorage::Variant?
+    def variable?
+      blob&.variable?
+    end
+
+    def icon?
+      is_defined?(:icon)
+    end
+
+    # https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+    def icon_name
+      return icon if icon
+      type_map = {
+        image: %w[image/bmp image/gif image/vnd.microsoft.icon image/jpeg image/png image/svg+xml image/tiff image/webp],
+        play: %w[video/mp4 video/mpeg video/ogg video/mp2t video/webm video/3gpp video/3gpp2],
+        music: %w[audio/aac audio/midi audio/x-midi audio/mpeg audio/ogg audio/opus audio/wav audio/webm audio/3gpp audio/3gpp2],
+        word: %w[application/msword application/vnd.openxmlformats-officedocument.wordprocessingml.document],
+        ppt: %w[application/vnd.ms-powerpoint application/vnd.openxmlformats-officedocument.presentationml.presentation],
+        excel: %w[application/vnd.ms-excel application/vnd.openxmlformats-officedocument.spreadsheetml.sheet],
+        slides: %w[application/vnd.oasis.opendocument.presentation],
+        spreadsheet: %w[application/vnd.oasis.opendocument.spreadsheet],
+        richtext: %w[application/vnd.oasis.opendocument.text],
+        zip: %w[application/zip application/x-7z-compressed application/x-bzip application/x-bzip2 application/gzip application/vnd.rar],
+        pdf: %w[application/pdf]
+      }
+
+      type = type_map.find { |key, mime_types| mime_types.include?(mime_type) }
+      if type
+        ["file", "earmark", type.first].compact.join("-")
+      else
+        "question"
+      end
+    end
+
+    def svg?
+      blob&.content_type == "image/svg+xml"
+    end
+
+    def inline_svg(options = {})
+      blob.open do |file|
+        content = file.read
+        doc = Nokogiri::HTML::DocumentFragment.parse content
+        svg = doc.at_css 'svg'
+
+        # for security
+        doc.search('script').each do |src|
+          src.remove
+        end
+
+        options.each { |attr, value| svg[attr.to_s] = value }
+
+        doc.to_html.html_safe
+      end
+    end
+  end
+end

data/app/views/formstrap/_autocomplete.html.erb

@@ -1,4 +1,4 @@
-<div class="h-autocomplete d-none" data-autocomplete-target="dropdown">
+<div class="formstrap-autocomplete d-none" data-autocomplete-target="dropdown">
 <% if collection.any? %>
   <%= render "formstrap/autocomplete/list" do %>
     <% collection.each do |value, name| %>

data/app/views/formstrap/_file.html.erb

@@ -36,7 +36,7 @@
     <%= render "formstrap/input_group", file.input_group_options do %>
 
       <% if file.preview %>
-        <div class="h-form-file-thumbnails" data-file-preview-target="thumbnails">
+        <div class="formstrap-file-thumbnails" data-file-preview-target="thumbnails">
 
           <!-- Render previews for attachments -->
           <%= form.fields_for(file.nested_attribute) do |ff| %>
@@ -46,13 +46,13 @@
               filename = attachment.blob.filename.to_s
               size = number_to_human_size(attachment.blob.byte_size)
             %>
-            <div class="h-form-file-thumbnail" title="<%= "#{filename} (#{size})" %>" data-file-preview-target="thumbnail">
+            <div class="formstrap-file-thumbnail" title="<%= "#{filename} (#{size})" %>" data-file-preview-target="thumbnail">
               <%= ff.hidden_field(:id, disabled: !file.destroy) %>
               <%= ff.hidden_field(:_destroy, data: {"file-preview-target": "thumbnailDestroy"}, disabled: !file.destroy) %>
               <%= render "formstrap/shared/thumbnail", file: attachment %>
 
               <% if file.destroy %>
-                <div class="h-form-file-thumbnail-remove" data-action="click->file-preview#remove" data-file-preview-name-param="<%= filename %>">
+                <div class="formstrap-file-thumbnail-remove" data-action="click->file-preview#remove" data-file-preview-name-param="<%= filename %>">
                   <%= bootstrap_icon("x") %>
                 </div>
               <% end %>
@@ -61,11 +61,11 @@
 
           <!-- Placeholder -->
           <% if file.dropzone %>
-            <div class="h-dropzone-placeholder <%= "d-none" if file.attachments.any? %>" data-file-preview-target="placeholder" style="height: 100px;">
-              <%= t("headmin.forms.file.placeholder", count: file.number_of_files) %>
+            <div class="formstrap-dropzone-placeholder <%= "d-none" if file.attachments.any? %>" data-file-preview-target="placeholder" style="height: 100px;">
+              <%= t(".placeholder", count: file.number_of_files) %>
             </div>
           <% else %>
-            <div class="h-form-file-thumbnail <%= "d-none" if file.attachments.any? %>" title="<%= t("headmin.forms.file.not_found") %>" data-file-preview-target="placeholder">
+            <div class="formstrap-file-thumbnail <%= "d-none" if file.attachments.any? %>" title="<%= t(".not_found") %>" data-file-preview-target="placeholder">
               <%= render "formstrap/shared/thumbnail", icon: "plus" %>
             </div>
           <% end %>
@@ -74,11 +74,11 @@
 
       <!-- Template -->
       <template data-file-preview-target="template">
-        <div class="h-form-file-thumbnail" title="" data-file-preview-target="thumbnail">
+        <div class="formstrap-file-thumbnail" title="" data-file-preview-target="thumbnail">
           <%= render "formstrap/shared/thumbnail" %>
 
           <% if file.destroy %>
-            <div class="h-form-file-thumbnail-remove" data-action="click->file-preview#remove">
+            <div class="formstrap-file-thumbnail-remove" data-action="click->file-preview#remove">
               <%= bootstrap_icon("x") %>
             </div>
           <% end %>

data/app/views/formstrap/_media.html.erb

@@ -15,6 +15,8 @@
   # * +wrapper+ - Hash with all options for the surrounding html tag
   # * +width+ - Width of the thumbnail
   # * +height+ - Height of the thumbnail
+  # * +exclude_models+ - Array of model names to exclude from selection (e.g. ["User", "Company"])
+  # * +edit_url+ - Placeholder link for the edit page of the attachment. Needs to contain a ":id" part, e.g. "admin_media_edit_url(":id"). This url be opened in a modal
   #
   # ==== References
   # https://headmin.dev/docs/forms/media
@@ -30,17 +32,17 @@
 
 <%= render "formstrap/wrapper", media.wrapper_options do %>
   <%= render "formstrap/label", media.label_options if media.prepend_label? %>
-  <div class="h-form-file-thumbnails" data-media-target="thumbnails">
+  <div class="formstrap-file-thumbnails" data-media-target="thumbnails">
     <%= render "formstrap/media/validation", media.custom_validation_options %>
 
     <!-- Render previews for attachments -->
     <%= form.fields_for(media.nested_attribute, media.association_object) do |ff| %>
-      <%= render "formstrap/media/item", media.item_options.merge(form: ff, url: formstrap_media_path(name: media.name, ids: media.blob_ids, min: media.min, max: media.max, mimetype: media.accept)) %>
+      <%= render "formstrap/media/item", media.item_options.merge(form: ff, edit_url: media.edit_modal_url(ff.object)) %>
     <% end %>
 
     <!-- Placeholder -->
     <div class="<%= "d-none" if media.attachments.any? %>" data-media-target="placeholder">
-      <a href="<%= formstrap_media_path(name: media.name, ids: media.blob_ids, min: media.min, max: media.max, mimetype: media.accept) %>" data-turbo-frame="remote_modal" data-media-target="modalButton">
+      <a href="<%= media.modal_url %>" data-turbo-frame="modal" data-media-target="modalButton">
         <%= render "formstrap/shared/thumbnail", media.thumbnail_options %>
       </a>
     </div>
@@ -50,7 +52,7 @@
   <% association_object = ActiveStorage::Attachment.new %>
   <template data-media-target="template" data-template-id-regex="<%= association_object.object_id %>">
     <%= form.fields_for(media.nested_attribute, ActiveStorage::Attachment.new, child_index: association_object.object_id) do |ff| %>
-      <%= render "formstrap/media/item", media.item_options.merge(form: ff, url: formstrap_media_path(name: media.name, ids: media.blob_ids, min: media.min, max: media.max, mimetype: media.accept)) %>
+      <%= render "formstrap/media/item", media.item_options.merge(form: ff, edit_url: media.edit_modal_url(ff.object)) %>
     <% end %>
   </template>
 

data/app/views/formstrap/_repeater.html.erb

@@ -59,7 +59,7 @@
   <%= render "formstrap/label", form: form, attribute: attribute, text: label, required: required %>
 <% end %>
 
-<ul class="repeater list-group <%= "list-group-flush" if flush %> mb-3" data-controller="repeater" data-repeater-target="list" data-repeater-id-value="<%= repeater_id %>">
+<ul class="formstrap-repeater list-group <%= "list-group-flush" if flush %> mb-3" data-controller="repeater" data-repeater-target="list" data-repeater-id-value="<%= repeater_id %>">
 
   <!-- Header -->
   <% if header %>
@@ -85,7 +85,7 @@
 
     <!-- Button -->
     <div
-       class="btn btn-sm h-btn-outline-light"
+       class="btn btn-sm btn-outline-secondary"
        data-repeater-target="addButton"
        data-popup-target="button"
        data-popup-id="<%= "repeater-buttons-#{repeater_id}" %>"
@@ -101,7 +101,7 @@
       <div class="d-grid gap-2">
         <% template_names.each do |name| %>
           <div
-             class="btn btn-sm h-btn-outline-light"
+             class="btn btn-sm btn-outline-secondary"
              data-popup-target="button"
              data-popup-id="<%= "repeater-buttons-#{repeater_id}" %>"
              data-action="click->repeater#addRow click->popup#close"

data/app/views/formstrap/media/_item.html.erb

@@ -9,29 +9,32 @@
   # * +sort+ - Allow sorting by dragging items. `active_storage_attachments` must have a position column.
   # * +width+ - Width of the thumbnail
   # * +height+ - Height of the thumbnail
+  # * +edit_url+ - URL for the edit modal
   #
 
   media_item = Formstrap::MediaItemView.new(local_assigns)
 %>
 
-<div class="h-form-file-thumbnail media-drag-sort-handle" title="<%= "#{media_item.filename} (#{media_item.size})" %>" data-media-target="item">
+<div class="formstrap-file-thumbnail media-drag-sort-handle" title="<%= "#{media_item.filename} (#{media_item.size})" %>" data-media-target="item">
   <%= form.hidden_field(:id) %>
   <%= form.hidden_field(:blob_id) %>
   <%= form.hidden_field(:position, value: media_item.position_value) if media_item.sort %>
   <%= form.hidden_field(:_destroy) %>
 
-  <a href="<%= media_item.url %>" data-turbo-frame="remote_modal" data-media-target="modalButton">
+  <a href="<%= media_item.url %>" data-turbo-frame="modal" data-media-target="modalButton">
     <%= render "formstrap/shared/thumbnail", media_item.thumbnail_options %>
   </a>
 
-  <div class="h-form-file-thumbnail-actions">
+  <div class="formstrap-file-thumbnail-actions">
     <!-- Edit -->
-    <a href="<%= formstrap_media_item_path(id: media_item.id) %>" class="h-form-file-thumbnail-edit" data-turbo-frame="remote_modal" data-media-target="editButton">
-      <%= bootstrap_icon("pencil") %>
-    </a>
+    <% if media_item.edit_url %>
+      <a href="<%= media_item.edit_url %>" class="formstrap-file-thumbnail-edit" data-turbo-frame="modal" data-media-target="editButton">
+        <%= bootstrap_icon("pencil") %>
+      </a>
+    <% end %>
 
     <!-- Remove -->
-    <div class="h-form-file-thumbnail-remove" data-action="click->media#destroy">
+    <div class="formstrap-file-thumbnail-remove" data-action="click->media#destroy">
       <%= bootstrap_icon("x") %>
     </div>
   </div>

data/app/views/formstrap/media/_modal.html.erb

@@ -1,11 +1,30 @@
-<div class="media-modal modal fade" tabindex="-1" data-controller="remote-modal media-modal" data-media-modal-ids-value="<%= params[:ids] ? params[:ids] : [] %>" data-name="<%= name %>" data-min="<%= min %>" data-max="<%= max %>">
+<div class="formstrap-media-modal modal fade" tabindex="-1" data-controller="modal media-modal" data-media-modal-ids-value="<%= params[:ids] ? params[:ids] : [] %>" data-name="<%= name %>" data-min="<%= min %>" data-max="<%= max %>">
   <div class="modal-dialog modal-lg modal-dialog-scrollable">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title">
           <%= t(".title", count: min.to_i < 1 ? 1 : min.to_i) %>
         </h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="<%= t(".close") %>"></button>
+
+        <div class="modal-header-actions d-flex align-items-center gap-3">
+          <%= formstrap_form_with url: formstrap_media_path, method: :get, data: {turbo_frame: "modal", media_modal_target: "search"}, class: "modal-search d-flex gap-1" do |form| %>
+            <%= form.hidden_field :name, value: request.query_parameters["name"] %>
+            <%= form.hidden_field :min, value: request.query_parameters["min"] %>
+            <%= form.hidden_field :max, value: request.query_parameters["max"] %>
+            <%= form.hidden_field :mimetype, value: request.query_parameters["mimetype"] %>
+            <%= form.hidden_field "exclude_models[]", value: request.query_parameters["exclude_models"] %>
+
+            <% if request.query_parameters["ids"] %>
+              <% request.query_parameters["ids"].each do |id| %>
+                <%= form.hidden_field "ids[]", value: id, data: {media_modal_target: "searchId"} %>
+              <% end %>
+            <% end %>
+
+            <%= form.search :search, value: request.query_parameters["search"], class: "form-control", label: false, wrapper: {class: ""}, placeholder: t(".search")  %>
+          <% end %>
+
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="<%= t(".close") %>"></button>
+        </div>
       </div>
       <div class="modal-body">
         <%= turbo_frame_tag "thumbnails", class: "d-flex flex-wrap gap-2" do %>
@@ -14,17 +33,25 @@
               <%= render "thumbnail" %>
             <% end %>
           <% end %>
-          <div data-media-modal-target="placeholder" class="<%= "d-none" if !@blobs.empty? %>">
+
+          <div data-media-modal-target="placeholder" class="<%= "d-none" if !@blobs.empty? && request.request_parameters["search"].nil? %>">
             <p><%= t(".placeholder") %></p>
           </div>
+
+          <div data-media-modal-target="search_no_results" class="<%= "d-none" if !@blobs.empty? || request.request_parameters["search"].present? %>">
+            <p><%= t(".search_no_results") %></p>
+          </div>
+        <% end %>
+
+        <% unless @blobs.empty? %>
+          <div class="mt-3">
+            <%= render "formstrap/pagination/infinite", items: @blobs %>
+          </div>
         <% end %>
-        <div class="mt-3">
-          <%= render "formstrap/pagination/infinite", items: @blobs %>
-        </div>
       </div>
       <div class="modal-footer">
-        <%= form_with url: formstrap_new_media_path, multipart: true, data: {"media-modal-target": "form"}, class: "me-auto" do |form| %>
-          <%= form.label :files, class: "btn h-btn-outline-light" do %>
+        <%= formstrap_form_with url: formstrap_new_media_path, multipart: true, data: {"media-modal-target": "form", turbo_frame: "modal"}, class: "me-auto" do |form| %>
+          <%= form.label :files, class: "btn btn-outline-secondary" do %>
             <%= bootstrap_icon("upload") %>
             <%= t(".upload") %>
             <%= form.file_field :files, accept: mimetypes, class: "d-none", multiple: true, data: {action: "change->media-modal#submitForm"} %>

data/app/views/formstrap/media/_thumbnail.html.erb

@@ -3,18 +3,22 @@
   <div data-media-modal-target="item" title="<%= "#{blob.filename} (#{l(blob.created_at, format: :long)})" %>">
     <!-- Input -->
     <input
-      id="media-item-<%= blob.id %>"
-      type="checkbox"
-      value="<%= blob.id %>"
-      data-action="change->media-modal#inputChange"
-      data-media-modal-target="idCheckbox"
-      hidden>
+        id="media-item-<%= blob.id %>"
+        type="checkbox"
+        value="<%= blob.id %>"
+        data-action="change->media-modal#inputChange"
+        data-media-modal-target="idCheckbox"
+        hidden>
 
     <!-- Label -->
-    <label for="media-item-<%= blob.id %>">
+    <label for="media-item-<%= blob.id %>" class="d-flex">
       <%= render "formstrap/shared/thumbnail", file: blob %>
     </label>
   </div>
 <% else %>
-  <%= render "formstrap/shared/thumbnail", file: nil %>
+  <div>
+    <label class="d-flex">
+      <%= render "formstrap/shared/thumbnail", file: nil %>
+    </label>
+  </div>
 <% end %>

data/app/views/formstrap/media/_validation.html.erb

@@ -2,7 +2,7 @@
 <%= form.text_field :"validation_#{attribute}",
   name: nil,
   value: nil,
-  class: "h-form-media-validation",
+  class: "formstrap-media-validation",
   data: {
     "media-target": "validationInput",
     "min-message": t(".min", count: min),

data/app/views/formstrap/media/create.turbo_stream.erb

@@ -1,5 +1,7 @@
 <%= turbo_stream.prepend "thumbnails" do %>
   <% @blobs.each do |blob| %>
-    <%= render "formstrap/media/thumbnail", blob: blob %>
+    <turbo-frame id="blob_<%= blob.id %>">
+      <%= render "formstrap/media/thumbnail", blob: blob %>
+    </turbo-frame>
   <% end %>
 <% end %>

data/app/views/formstrap/media/index.html.erb

@@ -1,3 +1,3 @@
-<%= turbo_frame_tag "remote_modal" do %>
+<%= turbo_frame_tag "modal" do %>
   <%= render "formstrap/media/modal", blobs: @blobs, mimetypes: @mimetypes, name: params[:name], min: params[:min], max: params[:max] %>
 <% end %>