Merge pull request #541 from kcking/imageupload

baaahs · Aug 4, 2023 · 9d5d3b3 · 9d5d3b3
2 parents 1272130 + 426a4a6
commit 9d5d3b3
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 98 deletions.
diff --git a/src/commonMain/kotlin/baaahs/doc/FileType.kt b/src/commonMain/kotlin/baaahs/doc/FileType.kt
@@ -60,6 +60,6 @@ abstract class FileType {
         override val contentTypeMasks: List<String>
             get() = listOf("image/*")
         override val matchingExtensions: List<String>
-            get() = listOf(".jpg", ".gif", ".png")
+            get() = listOf(".jpg", ".jpeg", ".gif", ".png")
     }
 }
diff --git a/src/jsMain/kotlin/baaahs/app/ui/document/FileUploadView.kt b/src/jsMain/kotlin/baaahs/app/ui/document/FileUploadView.kt
@@ -3,120 +3,57 @@ package baaahs.app.ui.document
 import FileRejection
 import baaahs.app.ui.appContext
 import baaahs.doc.FileType
-import baaahs.ui.*
-import csstype.em
-import dropzone
-import kotlinx.js.jso
-import materialui.icon
-import mui.icons.material.FileUpload
-import mui.material.SvgIconSize
+import baaahs.ui.withMouseEvent
+import baaahs.ui.xComponent
+import kotlinx.html.InputType
+import kotlinx.html.js.onChangeFunction
+import org.w3c.dom.HTMLInputElement
 import org.w3c.files.File
+import org.w3c.files.get
 import react.Props
 import react.RBuilder
 import react.RHandler
-import react.dom.*
+import react.dom.button
+import react.dom.div
+import react.dom.input
+import react.dom.onClick
 import react.useContext
-import renderDropzone
 
 private val FileUploadView = xComponent<FileUploadProps>("FileUpload") { props ->
     val appContext = useContext(appContext)
     val styles = appContext.allStyles.fileUploadStyles
     val fileType = props.fileType
 
-//    val handleUploadDrop by handler { files: Array<File> ->
-//
-//    }
-
-    dropzone {
-        if (fileType.contentTypeMasks.isNotEmpty() || fileType.matchingExtensions.isNotEmpty()) {
-            val accept = jso<Any>().asDynamic()
-            fileType.contentTypeMasks.ifEmpty { listOf("*/*") }
-                .forEach { contentType ->
-                    accept[contentType] = fileType.matchingExtensions.toTypedArray()
-                }
-            attrs.accept = accept
-            console.log("accept:", accept)
-        }
-        if (props.maxFiles != null) {
-            attrs.maxFiles = props.maxFiles
-        }
-        attrs.onDrop = props.onUpload
-        attrs.onFileDialogCancel
-
-        renderDropzone { dropzoneState ->
-            div(+styles.container) {
-                mixin(dropzoneState.getRootProps())
-
-                div(+styles.upload
-                        and dropzoneState.isDragAccept.then(styles.dragAccept)
-                        and dropzoneState.isDragActive.then(styles.dragActive)
-                        and dropzoneState.isDragReject.then(styles.dragReject)
-                        and dropzoneState.isFileDialogActive.then(styles.fileDialogActive)
-                        and dropzoneState.isFocused.then(styles.focused)
-                ) {
-                    input {
-                        mixin(dropzoneState.getInputProps())
-                    }
-
-                    icon(FileUpload) {
-                        fontSize = SvgIconSize.large
-                        sx = jso { margin = .25.em }
-                    }
-
-                    p {
-                        if (dropzoneState.isDragAccept) { +"dragAccept" }
-                        if (dropzoneState.isDragActive) { +"dragActive" }
-                        if (dropzoneState.isDragReject) { +"dragReject" }
-                        if (dropzoneState.isFileDialogActive) { +"fileDialogActive" }
-                        if (dropzoneState.isFocused) { +"focused" }
-
-                        if (dropzoneState.isDragReject) {
-                            +"That's not ${fileType.indefiniteTitleLower}."
-                        } else if (dropzoneState.isDragActive) {
-                            +"yom yom it's ${fileType.indefiniteTitleLower}!"
-                        } else {
-                            +"Drop ${fileType.indefiniteTitleLower} here, or "
-                            span(+styles.linkink) { +"browse" }
-                            +"…"
-                        }
-                    }
-
-                    if (dropzoneState.acceptedFiles.isNotEmpty()) {
-                        div {
-                            header { +"Accepted: " }
-
-                            ul {
-                                dropzoneState.acceptedFiles.forEach { file ->
-                                    li { +file.name }
-                                }
-                            }
-                        }
-                    }
-
-                    if (dropzoneState.fileRejections.isNotEmpty()) {
-                        div {
-                            header { +"Rejected: " }
-
-                            ul {
-                                dropzoneState.fileRejections.forEach { rejection ->
-                                    li {
-                                        +rejection.file.name
-                                        p { +": " }
-                                        +rejection.errors.joinToString()
-                                    }
-                                }
-                            }
-                        }
+    div {
+
+        input {
+            attrs.type = InputType.file
+            attrs.onChangeFunction = onchangeLambda@{ e ->
+                val files = e.target.unsafeCast<HTMLInputElement>().files ?: return@onchangeLambda
+                val filesArr = arrayOf<File>().toMutableList()
+                for (i in 0..files.length) {
+                    val file = files[i]
+                    if (file != null) {
+                        filesArr.add(file)
                     }
                 }
-            }
 
-            button {
-                attrs.onClick = props.onCancel.withMouseEvent()
-                +"Cancel"
+                props.onUpload(filesArr.toTypedArray(), arrayOf())
+                console.log(e)
             }
+            if (fileType.contentTypeMasks.isNotEmpty() || fileType.matchingExtensions.isNotEmpty()) {
+                attrs.accept = fileType.matchingExtensions.plus(fileType.contentTypeMasks).joinToString(separator = ", ")
+                console.log("accept:", attrs.accept)
+            }
+
+        }
+        button {
+            attrs.onClick = props.onCancel.withMouseEvent()
+            +"Cancel"
         }
+
     }
+
 }
 
 external interface FileUploadProps : Props {