CODEWITHSUNDEEP
web-componentkotlin-multiplatformkotlin-js
user3826764
user3826764

Reputation: 336

How to load image in Kotlin Compose web?

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.

Upvotes: 0

Views: 870

Answers (1)

user3826764
user3826764

Reputation: 336

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
                }
            }
        }
    )

Upvotes: 0

Related Questions