LoopOS UI v1.1.30.0-feat.indentifier.editor.869c1hwb7.rc3

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<form action="/pokemons/1/upload_image" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="WLfSPlKvaKjiCUnYZgHjwPsgUA22Y0m4UfqATSRhz5Di96WtNql0XzuToV32pFdCTwsXeO5EbqJb6rz_cgmQiw" />
<turbo-frame id="pokemon_image_upload">
  <div class="lui-input-file-form" data-controller="form-file">
    <input type="file" id="looposui-inputs-file-formfile_pokemon_1_image_5793709857-file-input" name="pokemon[image]" data-form-file-target="input" data-action="change->form-file#updateFileName" class="lui-input-file-form__input sr-only" accept="csv,txt,xlsx">
    <label class="lui-button lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button" data-form-file-target="button" data-select-text="Select file" data-replace-text="Replace file" for="looposui-inputs-file-formfile_pokemon_1_image_5793709857-file-input">
      <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
        <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-regular fa-file-arrow-up" data-lui--button-target="leadingIcon"></i></div>
      </div>
<span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
        Select file
      </span>          
      <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
        <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;">
          progress_activity
        </i>
      </div>
    </label>
    <span
    data-form-file-target="fileName"
    class="lui-input-file-form__file-name"
  >
      No file chosen
    </span>
  </div>
</turbo-frame></form>

File Input Usage

The LooposUi::Inputs::File component is designed for flexible file uploads with support for multiple files, custom endpoints, and advanced UI interactions.

Basic Example

<%= render LooposUi::Inputs::File.new(
  name: "my_file",
  upload_path: file_test_upload_path,
  download_path: file_test_download_path,
  delete_path: file_test_remove_path,
  multiple: false,
  mode: :form
) %>

Multiple Files Example

<%= render LooposUi::Inputs::File.new(
  name: "attachments",
  upload_path: file_test_upload_path,
  download_path: file_test_download_path,
  delete_path: file_test_remove_path,
  multiple: true,
  files: [OpenStruct.new(name: "example.pdf")],
  mode: :autosubmit
) %>

Integration Notes

  • The component works best with the input-file Stimulus controller for auto-submit and UI feedback.
  • Use the files option to display already uploaded files (for example, after a page reload).
  • The delete_path should point to an endpoint that accepts a file_name parameter for deletion.
  • The download_path should point to an endpoint that accepts a file_name parameter for download.

UI Features

  • Modal confirmation for file deletion.
  • Spinner and feedback for upload progress.
  • Customizable with additional data attributes.
1
2
3
4
5
6
7
8
<%= form_with url: upload_image_pokemon_path(Pokemon.first), method: :post do |f| %>
    <%= turbo_frame_tag "pokemon_image_upload" do %>
        <%= render LooposUi::Inputs::File::FormFile.new(
            model: Pokemon.first,
            attribute: :image,
        ) %>
    <% end %>
<% end %>

No notes provided.

No params configured.

File Input Component

Note: You must create and use your own controller to handle file uploads, downloads, and deletions. The delete_path option should point to your custom endpoint. This component does yet not provide backend logic for file handling.

The LooposUi::Inputs::File component provides a file input for uploading, downloading, and deleting files. It supports single and multiple file selection, as well as a form mode for when we don't want to autosubmit on upload.

NOTE: multiple file uploader is currently disabled. Will be enabled in a future release (task LOOPOS-32331)

Options

Option Type Default Description
mode Symbol :inline Rendering mode: :inline (auto-upload), :form (form submission), or :autosubmit. When :form, the file is submitted with the form instead of auto-uploading.
model ActiveRecord::Base — Model object for file association. Required when mode is not :form, or when using attribute.
attribute Symbol — The name of the hasoneattached or hasmanyattached relation. Required when mode is not :form.
name String — Input name attribute. Required when mode is :form and model/attribute are not provided.
form_id String — The form element's ID to associate the input with. Use if your form input is outside the form
delete_path String — Path to delete files. Required when mode is not :form.
accept Array of Symbols/Strings [:csv, :txt, :xlsx] Accepted file types (e.g., [:csv, :png], ['image/*'], or :all).

accept: Can be a list of string or symbols. Will be interpreted as file extensions (eg: :png -> .png) or MIME types (eg: image/png)

Any form inputs you have in your form will be also sent in the payload.

Usage

Example usage in the view:

<%# Single file uploader %>
<%= form_with url: upload_image_pokemon_path(Pokemon.first), method: :post do |f| %>
    <%= turbo_frame_tag "pokemon_image_upload" do %>
        <%= render LooposUi::Inputs::File.new(
            model: Pokemon.first,
            attribute: :image,
            delete_path: delete_image_pokemon_path(Pokemon.first),
        ) %>
    <% end %>
<% end %>
<%# Multiple file uploader %>
<%= form_with url: upload_images_pokemon_path(Pokemon.first), method: :post do |f| %>
    <%= turbo_frame_tag "pokemon_images_upload" do %>
        <%= render LooposUi::Inputs::File.new(
            model: Pokemon.first,
            attribute: :images,
            delete_path: delete_images_pokemon_path(Pokemon.first),
        ) %>
    <% end %>
<% end %>
<%# With form_id %>
<%= form_with id: "my_form", url: upload_image_pokemon_path(Pokemon.first), method: :post do |f| %>
    <%= f.hidden_field :form_id, value: f.id %>
<% end %>
<%= turbo_frame_tag "pokemon_image_upload" do %>
    <%= render LooposUi::Inputs::File.new(
        model: Pokemon.first,
        attribute: :image,
        delete_path: delete_image_pokemon_path(Pokemon.first),
        form_id: "my_form"
    ) %>
<% end %>
<%# Form file uploader (mode: :form) %>
<%= form_with url: create_pokemon_path, method: :post do |f| %>
    <%= render LooposUi::Inputs::File.new(
        model: @pokemon,
        attribute: :image,
        mode: :form
    ) %>
    <%= f.submit "Create Pokemon" %>
<% end %>

And in your controller:

include ActiveStorage::SetCurrent
  def upload_image
    pokemon_params = params.require(:pokemon).permit(:image)
    if @pokemon.update(pokemon_params)
      render(file_uploader)
    else
      # In a real app, you would also want to handle errors here
      render(file_uploader)
    end
  end
  def delete_image
    # No need to attachment management here, only one image per pokemon
    @pokemon.image.purge
    render(file_uploader)
  end
  def upload_images
    pokemon_params = params.require(:pokemon).permit(images: [])
    if @pokemon.update(pokemon_params)
      render(file_uploader_multiple)
    else
      # In a real app, you would also want to handle errors here
      render(file_uploader_multiple)
    end
  end
  def delete_images
    blob = ActiveStorage::Blob.find_signed(params[:attachment_signed_id])
    blob.attachments.each(&:purge)
    render(file_uploader_multiple(context: :action))
  end

In the response (which will be a turbo request) you should render the component again:

# Could've been a partial instead of a method
def file_uploader
  {
    turbo_stream: turbo_stream.replace(
      params[:uploader_id],
      LooposUi::Inputs::File.new(
        model: @pokemon,
        attribute: :image,
        delete_path: delete_image_pokemon_path(@pokemon),
        form_id: params[:form_id], # used in the outisde_form preview
      ),
    ),
  }
end
# Could've been a partial instead of a method
def file_uploader_multiple(**kwargs)
  {
    turbo_stream: turbo_stream.replace(
      params[:uploader_id],
      LooposUi::Inputs::File.new(
        model: @pokemon,
        attribute: :images,
        delete_path: delete_images_pokemon_path(@pokemon),
        **kwargs,
      ),
    ),
  }
end

Form File (mode: :form)

When using mode: :form, the component renders a simple file input that submits with the form. Unlike the single and multiple variants, it does not autosubmit files or require a delete_path. The file is submitted along with other form fields when the whole form is submitted.

Key differences:

  • No delete_path required
  • File is submitted with the form, not autosubmitted
  • No model/attribute required
  • Uses the form-file Stimulus controller for displaying the selected file name instead of the input-file Stimulus