File Upload Example (dedicated XMLHttpRequest)

On this page

Stats

#callbacks:

Source

Creates an XMLHttpRequest. Includes updating a progress bar.

Upload images:

scala

import com.fastscala.components.bootstrap5.helpers.BSHelpers.*
val allUploadedFiles = collection.mutable.ListBuffer[FSUploadedFile]()
JS.rerenderable(rerenderer => implicit fsc => {
  div.apply {
    if (allUploadedFiles.isEmpty) {
      h3.apply("Upload images:") ++
        FileUploadDedicatedXmlHttpRequest(
          uploadedFiles => {
            allUploadedFiles ++= uploadedFiles
            rerenderer.rerender()
          },
          multiple = true
        )
    } else {
      h3.apply("Uploaded images:") ++
        allUploadedFiles.toList.flatMap(uploadedFile => {
          val bytes = IOUtils.toByteArray(uploadedFile.inputStream())
          List(
            <img class="w-50 mb-1" src={s"data:${uploadedFile.contentType};base64, " + Base64.getEncoder.encodeToString(bytes)}></img>.mx_auto.d_block,
            <pre class="mb-4 text-center">{uploadedFile.name}</pre>
          )
        }).mkNS
    }
  }
}).render()