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 ` lt input type= file gt ` 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

is there any fritz2 example code for how to use a file picke kotlinlang #fritz2

Channels

lincheck

kobweb

kotlin-multiplatform-contest

osgi

brikk

revolver

tricity-kotlin-user-group

cincinnati-user-group

prozis-android-backup

refactoring-to-kotlin

russian-kotlinasfirst

androidgithubprojects

navigation-architecture-component

stayhungrystayfoolish

practical-functional-programming

tensorflow

swagger-gradle-codegen

kotlinultimatechallenge

competitive-programming

skia-wasm-interop-temp

java-to-kotlin-refactoring

event21-community-content

myndocs-oauth2-server

jvm-ir-backend-feedback

Title

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

Hampus Londögård

01/31/2021, 10:59 AM

changes.map { event }.watch()

Inside the scope of the dom

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 ?

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

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

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?

Jan Weidenhaupt

03/02/2021, 6:14 PM

@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 😉

6 Views

#fritz2 Join Slack