LoopOS UI v1.1.66.2

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
26
27
28
29
30
31
32
<form action="/pokemons/1/upload_image" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="MewV5F9-Qwfn5EnmX6QrI_QUwxHrlCI8RmNxUG7s5y-maSyL_ZP0mv9VugqLZ3T-HUFx0IMFvvk478Vo3V_PTQ" />
<turbo-frame id="file_preview_default_single">
  <div class="lui-input-file-wrapper">
    <div class="lui-input-file-container" id="looposui-inputs-file-single_pokemon_1_image_5793709857" data-controller="input-file" data-input-file-delete-path-value="/pokemons/1/delete_image" data-input-file-direct-upload-value="false" data-input-file-direct-upload-authorization-value="" data-input-file-standalone-value="false" data-input-file-field-name-value="pokemon[image]" data-input-file-submit-on-upload-value="true" data-input-file-validate-on-upload-value="false">
      <div class="lui-input-file">
        <span class="lui-button__tooltip-wrapper inline-flex w-fit">
          <label class="lui-button lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button" data-input-file-target="button" data-select-text="Select file" data-replace-text="Replace file" for="looposui-inputs-file-single_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-rounded" style="--lui-micon-size: 12px;">
                progress_activity
              </i>
            </div>
          </label></span>
        <input name="pokemon[image]" data-input-file-target="file" data-action="change->input-file#upload" id="looposui-inputs-file-single_pokemon_1_image_5793709857-file-input" class="hidden" type="file" accept=".pdf,application/pdf,.csv,text/csv,text/comma-separated-values,.txt,text/plain">
        <div class="flex flex-1 min-w-0 justify-end items-center gap-[2px]">
          <span class="lui-input-file__text" data-input-file-target="fileName">
            No file chosen
          </span>
          <span class="lui-input-file__spinner">
            <i class="fa-regular fa-spinner"></i>
          </span>
        </div>
      </div>
    </div>
  </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
<%= form_with url: upload_path, method: :post do |f| %>
  <%= turbo_frame_tag turbo_frame_id do %>
    <%= render LooposUi::Inputs::File.new(**file_options) %>
  <% end %>
<% end %>

No notes provided.

Param Description Input

Multiple file selection

Readonly display

Comma-separated extensions (e.g. pdf,csv,txt) or leave empty for default

Helper text below the input

Validation error message

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.

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 only when using model-backed attachments (attribute) in non-:form modes.
attribute Symbol — The name of the has_one_attached or has_many_attached relation. Use with model.
name String — Input name attribute. In non-model flows (mode: :autosubmit included), this is used directly as the native file input name.
multiple Boolean false Forces the multiple-file renderer when using name. With model-backed inputs, the attachment reflection is used when name is not present.
value String/Array — Optional display fallback. The component derives and displays file name(s) from this value when no persisted attachment object is available.
readonly Boolean false When true, hides upload/delete controls and the file input. Single mode shows the filename; multiple mode shows a file list with download links (or "No file chosen" when empty). delete_path is not required when readonly is true and mode is not :form.
help String — Optional helper text shown below the input. Hidden when error is present.
error String — Optional validation message shown below the input. Adds an error border to the file control.
extra_input_attributes Hash {} Merged into the native <input type="file"> (e.g. data-* attributes).
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 only for editable, model-backed (model + attribute) non-:form inputs without direct upload.
context Symbol :default Rendering context for streamed updates. Accepted values: :default, :action.
direct_upload_url String /rails/active_storage/direct_uploads When set, uploads use Active Storage Direct Upload. Defaults to /rails/active_storage/direct_uploads on the host app. Use the Core URL for protocol forms.
direct_upload_authorization String — Authorization header for remote direct upload (e.g. Bearer <token> when uploading to Core).
submit_on_upload Boolean true When direct upload is enabled, controls whether upload/removal submits the linked form automatically.
validate_on_upload Boolean false When true, standalone direct uploads submit the linked form for validation even if submit_on_upload is false.
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

Direct upload (Protocol Form)

When direct_upload_url is set, the component mirrors LooposUi::V2::Image standalone behaviour:

  1. The user picks file(s); the browser POSTs to Active Storage (direct_upload_url).
  2. Stimulus writes one or more hidden inputs with your name (e.g. protocol_answers[0][values][]) and value = blob signed_id.
  3. The native file input has no name (the binary is not submitted).
  4. Standalone usage (no model): when form_id is set, the linked form can be auto-submitted via requestSubmit() after a successful upload. Control this with submit_on_upload and validate_on_upload.

Use form_id to associate inputs with a form outside the component. With model + attribute, direct upload does not auto-submit the outer form (attach/server flows use the non-standalone path).

<%= form_with id: "protocol_form", url: protocol_step_path, method: :patch do |f| %>
  <%= render LooposUi::Inputs::File.new(
    mode: :form,
    name: "protocol_answers[0][values][]",
    form_id: "protocol_form",
    direct_upload_url: "#{core_base_url}/rails/active_storage/direct_uploads",
    direct_upload_authorization: "Bearer #{core_token}",
    accept: %w[pdf csv],
    help: "PDF up to 10 MB",
    error: @errors[:files],
    value: @existing_signed_ids,
  ) %>
  <%= f.submit "Continue" %>
<% end %>

For multiple files, use a name that ends with [] (same as Image V2). Each upload appends another hidden signed_id.

Form File (mode: :form)

When using mode: :form without direct_upload_url, the component renders a simple file input that submits the file binary with the form. Unlike the single and multiple variants, it does not autosubmit files or require a delete_path.

With direct_upload_url, :form mode uses the direct upload flow above (input-file Stimulus) instead of form-file.

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

Autosubmit With name/value (No model)

mode: :autosubmit also supports non-model usage. In this flow, the component still uses the input-file Stimulus controller, but does not render delete actions because there is no persisted attachment signed id to remove.

<%= render LooposUi::Inputs::File.new(
  mode: :autosubmit,
  name: "protocol_answers[0][values][]",
  value: "https://cdn.example.com/uploads/document.pdf",
  form_id: "client_info_form",
  accept: %w[pdf jpg jpeg png webp]
) %>

Use this variant when you need autosubmit UX and control the backend payload by name, without tying the input to an Active Record attachment relation.