How to implement filepicker in commonMain to pick files for both platforms.

# multiplatform

[Mahvi]

How to implement filepicker in commonMain to pick files for both platforms.

[Stefan Oltmann]

Use https://github.com/Wavesonics/compose-multiplatform-file-picker

[Mahvi]

Hi @Stefan Oltmann
I'm trying to use this lib. I'm able to pick the file in commonMain code. Now I don't know how to proceed with sending that picked file to the API.

Here is my code:

Column(modifier = Modifier.padding(20.dp)) {
            var showFilePicker by remember { mutableStateOf(false) }

            Button(onClick = { showFilePicker = true }) {
                Text("TEXT")
            }

            val fileType = listOf("jpg", "png")
            FilePicker(
                show = showFilePicker,
                fileExtensions = fileType
            ) { platformFile ->
                showFilePicker = false
                println("platformFile $platformFile")
            }

        }

[Mahvi]

Can you help?

[Stefan Oltmann]

To what API?

[Mahvi]

To my personal APIs

[Mahvi]

I have setup ktor and everything

[Stefan Oltmann]

They are in commonMain?
KTor fill likely need the ByteArray - so you should read that in.

If they are not in commonMain, learn how to use expect/actual:
https://kotlinlang.org/docs/multiplatform-expect-actual.html#different-approaches-for-using-expected-and-actual-declarations

[Mahvi]

The code I provided above is in the commonMain
My ktor client is also in commonMain.

[Mahvi]

I don't want to use platform specific code. I just want to pick the file and send it to the API in FormData format

[Stefan Oltmann]

The file picker gives you the path the user has choosen.

You will likely need kotlinx-io to read the files ByteArray in and then you need to pass that to ktor

[Stefan Oltmann]

Maybe ktor has abilities to read the file from the string path you get - that's possible

[Stefan Oltmann]

The file picker gives you a string path and for the rest you need to consult the ktor docs

[Mahvi]

Ahh, Thanks. I'm referring to the docs and internet.

[Stefan Oltmann]

I recommend checking out https://www.youtube.com/@PhilippLackner/videos

@Philipp Lackner has a tutorial for just everything and if not you may request it. What you try to do sounds like something many people may want.

[Mahvi]

Your help is much to me. I think I found it in ktor docs

import io.ktor.client.request.*
import io.ktor.client.request.forms.*
import io.ktor.client.statement.*
import io.ktor.http.*
import io.ktor.http.content.*
import io.ktor.server.application.*
import io.ktor.server.testing.*
import io.ktor.utils.io.streams.*
import org.junit.*
import java.io.*
import kotlin.test.*
import kotlin.test.Test

class ApplicationTest {
    @Test
    fun testUpload() = testApplication {
        val boundary = "WebAppBoundary"
        val response = <http://client.post|client.post>("/upload") {
            setBody(
                MultiPartFormDataContent(
                    formData {
                        append("description", "Ktor logo")
                        append("image", File("ktor_logo.png").readBytes(), Headers.build {
                            append(HttpHeaders.ContentType, "image/png")
                            append(HttpHeaders.ContentDisposition, "filename=\"ktor_logo.png\"")
                        })
                    },
                    boundary,
                    ContentType.MultiPart.FormData.withParameter("boundary", boundary)
                )
            )
        }
        assertEquals("Ktor logo is uploaded to 'uploads/ktor_logo.png'", response.bodyAsText())
    }
}

[Mahvi]

ktor can read files I think.

[Stefan Oltmann]

That's good to hear.

However, watching some tutorial videos first to get you started is a good idea that'll save you time afterwards. To me Phillips videos were very helpful.