File Field(ui_file_field)



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

 # by variable 
 ui_file_field name, options, html_options 

 # or by block 
 ui_file_field options, html_options do 


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


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>

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>

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>

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