is there any fritz2 example code for how to use a ...

# fritz2

[Nikky]

is there any fritz2 example code for how to use a file picker?
we need access to the File blocb which seems to only come from events on <input type="file"> or so.. but i am not sure how to attach event listeners in fritz2.. and i feel like i am going down the wrong path

[Hampus Londögård]

changes.map { event }.watch()

[Hampus Londögård]

Inside the scope of the dom

[Nikky]

the changes event do not varry with them any of the information that the input element would have put into them, how would i recover that ?

[Hampus Londögård]

Hi, as you're inside the scope of the 'dom' you can use that directly :)
Not as smooth as one would wish though..

[Hampus Londögård]

changes
                        .map { doSomethingWith(domNode.value) }
                        .watch()

[Nikky]

can this be used to be notified of when the dom is constructed? eg. for install leafet ?

[Nikky]

this works for a file picker:

changes.events.map { event: Event ->
    val inputElement = event.currentTarget as HTMLInputElement
    val files = inputElement.files!!
    val file = files[0]!!
    console.log("file picked:", file)
    file
} handledBy userCsvUploadStore.update

[Nikky]

still seeing which way works properly for getting when the dom is constructed and available

[Hampus Londögård]

Give me a second and I'll share my code

[Hampus Londögård]

inputField(smallTopMargin) {
                base {
                    type("file")
                    accept("image/*")
                    changes
                        .files()
                        .mapNotNull { value: FileList? -> value?.get(0) }
                        .onEach { file -> fileReader.readAsDataURL(file) }
                        .watch()
                }
            }

This is also null-safe compared to your !! approach 🙂
My fileReader is a normal FileReader which works async, so I've attached a handler on its onload

[Hampus Londögård]

FileReader for me was not really nice, as overloading onload is very much like touching JS-code without nice wrappers into a Flow. Do you know how to do that smoothly?

[Jan Weidenhaupt]

@Nikky take a look here: https://github.com/jwstegemann/fritz2/blob/master/components/src/jsMain/kotlin/dev/fritz2/components/file.kt
We build a fritz2 component for it 😉