File Upload Input Example

import com.fastscala.components.bootstrap5.helpers.BSHelpers.*
import DefaultFSDemoBSForm7Renderers.*
div.border.p_2.rounded.apply {
  new Form7 {

    lazy val fileInputField = new F7FileUploadField().label("File upload").multiple(true).previewRenderer(files => implicit fsc => {
      div.row.overflow_x_auto.apply {
        files.collect({
          case f if f.name.endsWith("jpg") || f.name.endsWith("png") =>
            <div class="col mb-1">{<img src={s"data:${f.contentType};base64, " + Base64.getEncoder.encodeToString(f.bytes)}></img>.d_block.w_100}</div>
        }).mkNS
      }
    })
    lazy val fileInputDescription = new F7HtmlField(_ => <p>The file input field has currently {fileInputField.currentValue.size} files.</p>).dependsOn(fileInputField)

    override lazy val rootField: F7Field = F7VerticalField()(
      fileInputField,
      fileInputDescription,
      new F7SubmitButtonField(implicit fsc => BSBtn().BtnPrimary.lbl("Submit").btn.d_block),
    )

    override def formRenderer: F7FormRenderer = DefaultFSDemoBSForm7Renderers.formRenderer
  }.render()
}