https://kotlinlang.org logo
Title
n

Nikky

01/27/2021, 4:50 PM
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
👀 1
h

Hampus Londögård

01/31/2021, 10:59 AM
changes.map { event }.watch()
Inside the scope of the dom
n

Nikky

02/01/2021, 8:53 AM
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 ?
h

Hampus Londögård

02/01/2021, 9:11 AM
Hi, as you're inside the scope of the 'dom' you can use that directly :) Not as smooth as one would wish though..
changes
                        .map { doSomethingWith(domNode.value) }
                        .watch()
n

Nikky

02/01/2021, 10:09 AM
can this be used to be notified of when the dom is constructed? eg. for install leafet ?
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
still seeing which way works properly for getting when the dom is constructed and available
h

Hampus Londögård

02/01/2021, 10:28 AM
Give me a second and I'll share my code
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
👍 1
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?
j

Jan Weidenhaupt

03/02/2021, 6:14 PM