File Upload Example

Source Code

object UploadedImage extends FSSessionVarOpt[FSUploadedFile]()

// [...]

    import com.fastscala.templates.bootstrap5.classes.BSHelpers._
    JS.rerenderable(rerenderer => implicit fsc => {
      div.border.p_2.rounded.apply {
        UploadedImage() match {
          case Some(uploadedFile) =>
            h3.apply("Uploaded image:") ++
              <img class="w-100" src={s"data:${uploadedFile.contentType};base64, " + Base64.getEncoder.encodeToString(uploadedFile.content)}></img>.mx_auto.my_4.d_block
          case None =>
            h3.apply("Upload an image:") ++
              FileUpload(
                uploadedFile => {
                  UploadedImage() = uploadedFile.head
                  rerenderer.rerender()
                })
        }
      }
    }).render()

Upload an image: