Class: Fluxbit::Form::UploadImageComponent

Inherits:
FieldComponent
  • Object
show all
Defined in:
app/components/fluxbit/form/upload_image_component.rb

Overview

The ‘Fluxbit::Form::UploadImageComponent` renders a stylized image upload field with live preview, drag-and-drop UI, support for both mobile and desktop layouts, labels, helper text, and integration with Rails form builders and Active Storage attachments. It provides custom title/subtitle, placeholder, and image preview, and is fully configurable via props.

Examples:

Basic usage

= render Fluxbit::Form::UploadImageComponent.new(attribute: :avatar, label: "Profile photo")

See Also:

  • For detailed documentation and examples.

Instance Method Summary collapse

Constructor Details

#initialize(**props) ⇒ UploadImageComponent

Initializes the upload image component with the given properties.

Parameters:

  • form (ActionView::Helpers::FormBuilder) —

    The form builder (optional, for Rails forms)

  • attribute (Symbol) —

    The model attribute to be used in the form (required if using form builder)

  • id (String) —

    The id of the input element (optional)

  • label (String) —

    The label for the input field (optional)

  • help_text (String) —

    Additional help text for the input field (optional)

  • helper_popover (String) —

    Content for a popover helper (optional)

  • helper_popover_placement (String) —

    Placement of the popover (default: “right”)

  • image_path (String) —

    Path to the image to be displayed (optional)

  • image_placeholder (String) —

    Placeholder image path if no image is attached (optional)

  • title (Boolean, String) —

    Whether to show a title (true for default, false to hide, or custom string)

  • class (String) —

    Additional CSS classes for the input element

  • ... —

    any other HTML attribute supported by file_field_tag



27
28
29
30
31
32
33
34
35
36
 
# File 'app/components/fluxbit/form/upload_image_component.rb', line 27

def initialize(**props)
  super(**props)
  @title = @props.delete(:title) || "Change"
  @image_path = @props.delete(:image_path) ||
    (if @object&.send(@attribute).respond_to?(:attached?) && @object&.send(@attribute)&.send("attached?")
      @object&.send(@attribute)&.variant(resize_to_fit: [ 160, 160 ])
     end) || @props.delete(:image_placeholder) || ""

  @props["class"] = "absolute inset-0 h-full w-full cursor-pointer rounded-md border-gray-300 opacity-0"
end

Instance Method Details

#image_element ⇒ Object 



45
46
47
48
49
 
# File 'app/components/fluxbit/form/upload_image_component.rb', line 45

def image_element
  image_tag @image_path,
            class: "img_photo_#{id} img_photo absolute inset-0 w-full h-full object-cover rounded-full",
            alt: @attribute&.to_s&.humanize
end

#input_element(input_id: nil) ⇒ Object 



38
39
40
41
42
43
 
# File 'app/components/fluxbit/form/upload_image_component.rb', line 38

def input_element(input_id: nil)
  @props["onchange"] = "loadFile(event, '#{id}')"
  return file_field_tag @name, @props.merge(id: input_id || id) if @form.nil?

  @form.file_field(@attribute, **@props, id: input_id || id)
end