Class: BulmaPhlex::FileUpload

Inherits:
Base
  • Object
show all
Defined in:
lib/bulma_phlex/file_upload.rb

Overview

Renders a styled [Bulma file upload](bulma.io/documentation/form/file/) input element.

Supports Bulma options for color, size, and layout (alignment, fullwidth, boxed), with an optional **file name display** element. When the file name display is enabled, Stimulus data attributes are wired up automatically for showing the selected filename.

Defined Under Namespace

Classes: DataAttributesBuilder

Class Method Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(color: nil, size: nil, name: false, align: nil, fullwidth: false, boxed: false, data_attributes_builder: nil) ⇒ FileUpload

Returns a new instance of FileUpload.



40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
# File 'lib/bulma_phlex/file_upload.rb', line 40

def initialize(color: nil,
               size: nil,
               name: false,
               align: nil,
               fullwidth: false,
               boxed: false,
               data_attributes_builder: nil)
  @color = color
  @size = size
  @name = name
  @align = align
  @fullwidth = fullwidth
  @boxed = boxed

  return unless @name

  @data_attributes_builder = data_attributes_builder ||
                             self.class.stimulus_data_attributes("bulma-phlex--file-input-display")
end

Class Method Details

.new(color: nil, size: nil, name: false, align: nil, fullwidth: false, boxed: false, data_attributes_builder: nil) ⇒ Object

Parameters

  • ‘color` — Sets the color of the file input

  • ‘size` — Sets the size of the file input

  • ‘name` — If `true`, includes the file name display element

  • ‘align` — Aligns the file input: `“right”` or `“centered”`

  • ‘fullwidth` — If `true`, makes the file input full width

  • ‘boxed` — If `true`, makes the file input boxed

  • ‘data_attributes_builder` — A custom builder for the data attributes used for Stimulus integration; defaults to a builder with the controller name `“bulma-phlex–file-input-display”`



30
31
32
33
34
35
36
37
38
 
# File 'lib/bulma_phlex/file_upload.rb', line 30

def self.new(color: nil,
             size: nil,
             name: false,
             align: nil,
             fullwidth: false,
             boxed: false,
             data_attributes_builder: nil)
  super
end

.stimulus_data_attributes(controller) ⇒ Object 



12
13
14
15
16
17
18
 
# File 'lib/bulma_phlex/file_upload.rb', line 12

def self.stimulus_data_attributes(controller)
  DataAttributesBuilder.new(
    for_file: { controller: controller },
    for_file_input: { "#{controller}-target": "fileInput", action: "#{controller}#show" },
    for_file_list: { "#{controller}-target": "fileList" }
  )
end

Instance Method Details

#view_template ⇒ Object 



60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
# File 'lib/bulma_phlex/file_upload.rb', line 60

def view_template
  div(class: file_classes, data: @data_attributes_builder&.for_file) do
    label(class: "file-label") do
      yield(@data_attributes_builder&.for_file_input)
      span(class: "file-cta") do
        span(class: "file-icon") do
          i(class: "fas fa-upload")
        end
        span(class: "file-label") { plain " Choose a file… " }
      end
      file_name_span if @name
    end
  end
end