LoopOS UI v1.1.29.0

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<turbo-frame data-turbo-action="advance" id="lui-main-layout" data-turbo-frame="lui-main-layout" class="min-h-0 " style="">
  <div class="lui-layout-loading">
    <div class="lui-layout-loading__content">
      <div class="lui-skeleton ">
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__footer">
          <div class="lui-skeleton__bar--footer"></div>
          <div class="lui-skeleton__bar--footer lui-skeleton__bar--footer--invisible"></div>
        </div>
      </div>
      <div class="lui-skeleton lui-skeleton--full">
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__footer">
          <div class="lui-skeleton__bar--footer"></div>
          <div class="lui-skeleton__bar--footer lui-skeleton__bar--footer--invisible"></div>
        </div>
      </div>
      <div class="lui-skeleton lui-skeleton--full">
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__footer">
          <div class="lui-skeleton__bar--footer"></div>
          <div class="lui-skeleton__bar--footer lui-skeleton__bar--footer--invisible"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="lui-main_layout__content" data-skeleton-loading="true">
    <turbo-frame id="images_test">
      <turbo-frame id="multiple_image_image_pokemon_1_full">
        <div data-controller="images" data-images-editable-value="true" data-images-with-attached-value="false" data-images-turbo-frame-id-value="multiple_image_image_pokemon_1_full" data-images-unique-id-value="multiple_image_image_pokemon_1_full" data-images-list-view-value="false" data-images-has-many-value="false" data-images-force-new-value="false" data-images-urls-value="{"attach":"/loopos_ui/digimon_images","detach":"/loopos_ui/digimon_images"}">
          <div class="lui-image lui-image--full" data-images-target="imageComponent" data-action="pubsub:action@window->images#executeAction">
            <div
          role="status"
          class="hidden lui-image__loader"
          data-images-target="loader"
        >
              <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-tiny lui-button--disabled w-fit w-fit relative" data-controller="lui--button" disabled="disabled">
                <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-spinner" data-lui--button-target="leadingIcon"></i></div>
                </div>
            
                <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>
              </button>
            </div>
            <img class="hidden lui-image__image" data-images-target="image" src="" />
            <div
          class="lui-image__placeholder lui-image__placeholder--editable flex"
          data-images-target="placeholder"
        >
              <div class="lui-icon h-[16px] w-[16px]">
                <i class="fa-regular fa-image lui-icon__icon" style="font-size: 16px; color: white;"></i>
              </div>
            </div>
            <div class="overflow-visible lui-image__image-edit">
              <form data-images-target="form" enctype="multipart/form-data" action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="GEtdpiyLSKwyMCfm9Xa7oAmA5hWQB2T-Uo2P7V-9mN99SuOFYUSrJyvGylUzABkOp_lgptfXKJwpBkF6NnEwfQ" />
                <input type="hidden" name="authenticity_token" id="authenticity_token" value="HJ_5gCZfkhhiKusoqTLTv9W9Z2lEm4kuYjXZhyluYx_61UUwweiVJ_1WuWPKNM0clx-704-CzSZKlj3el7U10A" />
                <input type="hidden" name="context" id="context" value="lHYclbmULWsu9TE8e23z74j5Tf/nYskzywMx2ceHpyg2D3QB1USewSPXJAaVcQKN/wjBrm+LXHs5zVGfC+YiROQJ/3wI0U9oG8iZRKnPtSrMBDWemVPnmQIsld0=--xXWeC9ArZ/sCw9YJ--4asfwJjjOEOHxvkDydTVTQ==" />
                <div class="hidden" data-images-target="noImageUploader">
                  <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button" data-action="click->images#openFilePicker">
                    <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
                      <div class="lui-tooltip__title">
                        Upload image here
                      </div>
                    </div>
                    <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-upload" data-lui--button-target="leadingIcon"></i></div>
                    </div>
            
                    <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>
                  </button>
                </div>
                <div class="hidden" data-images-target="withImageUploader">
                  <div
  data-controller="action-menu"
  data-action="modal:open@window->action-menu#disableTippy modal:close@window->action-menu#enableTippy"
                    class="lui-action-menu">
                    <div data-action-menu-target="trigger">
                      <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button" type="button">
                        <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-ellipsis-vertical" data-lui--button-target="leadingIcon"></i></div>
                        </div>
            
                        <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>
                      </button>
                    </div>
                    <div data-action-menu-target="menu" class="hidden lui-action-menu__wrapper" data-controller="modal form-submit pubsub">
                      <div class="lui-action-menu__options" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
                        <div class="contents cursor-pointer">
                          <div class="lui-action-menu__option " data-action="click->pubsub#publish" data-pubsub-unique-id-param="multiple_image_image_pokemon_1_full" data-pubsub-action-param="openFilePicker">
                            <div class="lui-action-menu__option-text cursor-default">
                              <i class="fa-regular fa-arrows-rotate"></i>
                              <span>Upload new image</span>
                            </div>
                          </div>
                        </div>
        
                        <div class="contents cursor-pointer">
                          <div class="lui-action-menu__option " data-action="click->pubsub#publish" data-pubsub-unique-id-param="multiple_image_image_pokemon_1_full" data-pubsub-action-param="detachImage">
                            <div class="lui-action-menu__option-text cursor-default">
                              <i class="fa-regular fa-trash"></i>
                              <span>Remove image</span>
                            </div>
                          </div>
                        </div>
    </div>
                    </div>
                  </div>
                </div>
                <input accept="image/jpeg,image/png" class="hidden" data-images-target="file" data-action="change->images#previewAndSubmit" data-direct-upload-url="https://loopos-ui.theloop.pt/rails/active_storage/direct_uploads" type="file" name="file" id="file" />
                <input name="files[][]" type="hidden" value="" /><input accept="image/jpeg,image/png" multiple="multiple" class="hidden" data-images-target="fileMultiple" data-action="change->images#previewAndSubmitMultiple" data-direct-upload-url="https://loopos-ui.theloop.pt/rails/active_storage/direct_uploads" type="file" name="files[][]" id="files[]" />
                <input type="submit" name="commit" value="Save" data-images-target="submit" data-disable-with="Save" class="hidden" />
              </form>
          </div>
          </div>
          <span class="lui-image__error" data-images-target="error">
            Error message
          </span>
        </div>
      </turbo-frame>
    </turbo-frame>
  </div>
</turbo-frame>
<turbo-frame id="lui-main-layout-actions">
</turbo-frame>

No Usage documentation to display.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%= render LooposUi::MainLayout.new do %>
  <%= turbo_frame_tag "images_test" do %>
    <%= render LooposUi::V2::Image.new(
      model: Pokemon.first,
      association: :image,
      editable: true,
      rounded: params[:rounded] || false,
      size: params[:size] || "full",
      # accept: ommit this option to use the default config
      # accept: :all,
      # accept: [:svg, :gif]
      accept: [:jpeg, :png, "image/svg+xml"],
      path: main_app.loopos_ui_digimon_images_path,
      )
    %>
  <% end %>
<% end %>

No notes provided.

Param Description Input

—

—

Description

The Image V2 component is an enhanced version of the base Image component that provides image upload and management capabilities. It supports both single and multiple image handling, with options for different sizes, shapes, and editing capabilities.

Arguments

Property Default Description
model nil ActiveRecord model that the image belongs to
association nil Name of the image association on the model (:image or :images)
editable false Enables image upload and management controls
size :full Size of the image container (:full or :small)
rounded false Makes the image circular when true
image_url nil Direct URL to an image (alternative to model association)
accept configurable Array of accepted file types (e.g., [:jpeg, :png, "image/svg+xml"]), or :all for all registerer image MIME types
list_view false Enables list view mode for multiple images
path loopos_ui.images_path Path to backend controller. Use when you want to extend the current LoopOS UI one

accept get its default value from LooposUi.config.image_default_accept_formats, by default it accepts png, jpeg and webp. You can change this in the initializer.

When extending the LoopOS UI images controller, set the ActiveSupport::Callbacks needed in your own controller, and then call run_callbacks around the block you want your changes to act. These callbacks have to be named :create or :destroy, since those are the hooks available. Each of them allowing the programmer to insert operations before and after their respective methods.

# Your custom controller
class LooposUi::ExtendedImagesController < LooposUi::ImagesController
   #We can declare using Lambda, or methods
   set_callback :create, :before, -> { Rails.logger.info "Before" }
   set_callback :destroy, :after, :foo
   def foo
      Rails.logger.info "After" 
   end
end

Features

  1. Single Image Upload

    • Default placeholder for empty state
    • Upload button appears on hover when editable
    • Supports direct image URLs
    • Configurable accepted file types

  2. Multiple Image Upload

    • Supports ActiveStorage has_many relationships
    • Optional list view mode
    • Bulk upload capability
    • Image deletion functionality

  3. Styling Options

    • Two size options: full and small
    • Optional rounded/circular display
    • Responsive design
    • Hover states for interactive elements

Validations

The accept option is used to validate the file type during upload.

  • In the frontend: checking the declared MIME type
  • In the backend: checking the actual uploaded content type

In the case of multiple upload, the accept option is applied to each uploaded file, and the upload will fail if any of the files does not match the declared MIME type.

Leaving the accept option empty will allow all image MIME types to be uploaded (image/*), and in the backend will check if the uploaded MIME type is an image.

Note: This component uses it's own controller to handle the upload, using Direct Uploads. It also modifies the blob directly, so the model validation will not trigger. In a future version, this can change.