Hey, I have a doubt. Suppose Im using KMP with canvas web. Now I want to implement file picker so f...

# compose-web

[Kapil Yadav]

Hey, I have a doubt.
Suppose Im using KMP with canvas web.

Now I want to implement file picker so for file picker Im making a composable component seprately.
In web compose how can we make / invoke file picker to pick files.

[Kapil Yadav]

window.showOpenFilePicker();
like this in js we have this api but in kmp cant find this for js

[Oleksandr Karpovich [JB]]

You need to call it in your jsMain source set.

If it's not available in kotlin then call js code like this:

js("window.showOpenFilePicker()")

[Kapil Yadav]

then how to listen its callback and the data its sending back after chosing file ?

[Oleksandr Karpovich [JB]]

https://developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker

that function returns a Promise.

In k/js you can use a Promise: https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.js/-promise/
Or with coroutines you can await on a Promise: https://kotlinlang.org/api/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines/await.html

[Oleksandr Karpovich [JB]]

js(“window.showOpenFilePicker()“) as Promise<YourTypeHere>

[Kapil Yadav]

Now here type is FileSystemFileHandle this isn’t yet available in k/js so then how to handle this ?

[Oleksandr Karpovich [JB]]

external interface SomeInterfaceAvailableInWebAPI {
     val property1: SomeType
     val property2: SomeType2
}

so you can provide such a declaration for FileSystemFileHandle

[Kapil Yadav]

I tried to make a data class and external interface of its props but its showing unknown.

[Kapil Yadav]

external interface FileSystemFileHandle {
    val kind: String
    val name: String
}

[Kapil Yadav]

val file = js("window.showOpenFilePicker()") as Promise<FileSystemFileHandle>
file.then {
    selectedFile.invoke(it.toString())
    console.log(it.kind)
}.catch {

}.finally {

}

[Oleksandr Karpovich [JB]]

I'm not sure why it's showing "uknown". I can try to reproduce but not today.
You can try to implement it in plan js first to be sure. And then to port the js code to k/js

[Kapil Yadav]

external interface SomeInterfaceAvailableInWebAPI {
     val property1: SomeType
     val property2: SomeType2
}

so you can provide such a declaration for FileSystemFileHandle

can you share me this docs Ill look into it

[Oleksandr Karpovich [JB]]

I couldn't find it quickly. But #javascript channel is about k/js specifically

[Paul Woitaschek]

Did someone ever get this working?

[Kapil Yadav]

Still waiting;)

[Paul Woitaschek]

@John O'Reilly
Browsing the internet; it seems you were in search too:
https://github.com/Wavesonics/compose-multiplatform-file-picker/issues/101#issuecomment-1875110729

Did you find a solution?

[John O'Reilly]

No, not yet

[Paul Woitaschek]

All right; got something working 😊

[Paul Woitaschek]

Untitled.kt

Untitled.kt

[Paul Woitaschek]

It’s important to note that the file picker stuff is not available in Firefox for instance.
Works in Chrome, Edge and Opera
https://developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker

[Paul Woitaschek]

Here is a more compatible way:

[Paul Woitaschek]

Untitled.py

Untitled.py

[Kapil Yadav]

Aye thanks broo

[Paul Woitaschek]

Til JS ^^

[Kapil Yadav]

JsAny is how will I get data from it

[Paul Woitaschek]

See the first snippet