fix safari request file bug

lightningkite · Jul 30, 2024 · c31bc52 · c31bc52
1 parent e263619
commit c31bc52
Showing 1 changed file with 18 additions and 3 deletions.
diff --git a/library/src/jsMain/kotlin/com/lightningkite/kiteui/ExternalServices.kt b/library/src/jsMain/kotlin/com/lightningkite/kiteui/ExternalServices.kt
@@ -19,15 +19,30 @@ actual object ExternalServices {
         window.open(url, "_blank")
     }
 
+    private var lastFileInput: HTMLInputElement? = null
+    private fun removeFileInput() {
+        lastFileInput?.let { document.body!!.removeChild(it) }
+        lastFileInput = null
+    }
     suspend fun requestFileInput(mimeTypes: List<String>, setup: HTMLInputElement.() -> Unit): List<FileReference> =
         suspendCoroutineCancellable {
+            removeFileInput()
             (document.createElement("input") as HTMLInputElement).apply {
                 type = "file"
+                hidden = true
                 accept = mimeTypes.joinToString(",")
                 setup()
-                onchange =
-                    { e -> it.resume(files?.let { (0 until it.length).map { index -> it.item(index)!! } } ?: listOf()) }
-                oncancel = { e -> it.resume(listOf()) }
+                // iOS Safari requires 'addEventListener' opposed to setting onchange directly, and requires it to be attached to the dom.
+                addEventListener("change", { _ ->
+                    it.resume(files?.let { (0 until it.length).map { index -> it.item(index)!! } } ?: listOf())
+                    removeFileInput()
+                })
+                addEventListener("cancel", { _ ->
+                    it.resume(listOf())
+                    removeFileInput()
+                })
+                document.body!!.appendChild(this)
+                lastFileInput = this
             }.click()
             return@suspendCoroutineCancellable { }
         }