How to load image in Kotlin Compose web?

Question

How to load images from the hard disk when using Kotlin compose for web? Is there a kotlin multiplatform library to target js, ios and android? A library just handling the web part would be great! If not, then the other solution I can think of using javascript and posting image to server directly from javascript rather than ktor in kotlin.

Answer 1

Here's the solution that worked for me. Shows an image preview of the uploaded file.

        Input(
        type = InputType.File,
        attrs =  {
            id("fileInput")
            accept("image/*")
            onChange {
                val img = document.getElementById("img") as HTMLImageElement
                val fileInput = document.getElementById("fileInput") as HTMLInputElement
                val fileReader = FileReader()
                fileReader.readAsDataURL(fileInput.files?.get(0) as Blob)
                fileReader.onload = {
                    val imageFile = (it.target as FileReader).result
                    img.src = imageFile as String
                    Unit
                }
            }
        }
    )