File Field(ui_file_field)Bootstrap Logo

UiBibz::Ui::Core::Forms::Files::FileField

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • html_options[hash]<default: {}>
  • options[hash]<default: {}>

 # by variable 
 ui_file_field name, options, html_options 

 # or by block 
 ui_file_field options, html_options do 
   name 
 end

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • multiple[boolean]Upload multiple files
  • size[symbol](:lg, :md, :sm)(use component size method)
  • state[symbol](:disabled, :active)(use component state method)
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)

Examples

Some examples explain how to use the options present in the component.

File Field

ui_file_field "upload"

<div class="custom-file">
  <input type="file" name="upload" id="upload" class="custom-file-input">
  <label class="custom-file-label" for="upload"></label>
</div>

File Field state

ui_file_field "upload", state: :disabled

<div class="disabled custom-file">
  <input type="file" name="upload" id="upload" class="custom-file-input" disabled="disabled">
  <label class="custom-file-label" for="upload"></label>
</div>

File Field Multiple

ui_file_field "upload", multiple: true

<div class="custom-file">
  <input type="file" name="upload" id="upload" class="custom-file-input" multiple="multiple">
  <label class="custom-file-label" for="upload"></label>
</div>

Simple form

Ui Bibz is compatible with simple form. You can use defaults inputs of Simple Form and defaults inputs of Ui Bibz like ui_file_field. You can use Simple Form input options and Ui Bibz ui_file_field options.

ui_form_for(@search) do |f|
  ...
  f.input :upload, as: :ui_file_field
  ...
end