https://kotlinlang.org logo
#kvision
Title
# kvision
f

Francis Mariano

08/16/2022, 12:53 PM
Hello, I am building a simple page and I need to open two files for comparing each other. First step, how can I open a file in the browser ????
r

Robert Jaros

08/16/2022, 12:56 PM
Simple answer: you can't
Browser security will not allow you to do this.
But you can upload file.
You can use
Upload
component to implement this.
User will have to choose those two files (or use D&D).
f

Francis Mariano

08/16/2022, 1:02 PM
ohhh right, perfect. Thank you very much. I started with Kvision today but I don't have web development background. So I am suffering with CCS and so on.
Is it possible render only the D&D area ??
r

Robert Jaros

08/16/2022, 2:21 PM
This should do the trick:
Copy code
uploadInput(uploadUrl = "/", multiple = true) {
                showBrowse = false
                showCancel = false
                showRemove = false
                showUpload = false
                showCaption = false
            }
f

Francis Mariano

08/16/2022, 2:28 PM
tks a lot. I missed of
showCaption = false
hello, I here again 🙂 . I am trying to put two D&D area inside a HPanel, but with no success until now.
Copy code
formPanel {
    add(HPanel(spacing = 3, alignItems = AlignItems.CENTER) {
        width = 80.perc
        add(Form::upload01, Upload("/", multiple = false).apply {
            showBrowse = false
            showCancel = false
            showRemove = false
            showUpload = false
            showCaption = false
            explorerTheme = true
            dropZoneEnabled = true
            allowedFileExtensions = setOf("csv")
        })
        add(Form::upload02, Upload("/", multiple = false).apply {
            showBrowse = false
            showCancel = false
            showRemove = false
            showUpload = false
            showCaption = false
            explorerTheme = true
            dropZoneEnabled = true
            allowedFileExtensions = setOf("csv")
        })
    })
Copy code
formPanel {
    hPanel(spacing = 3, alignItems = AlignItems.CENTER) {
        width = 80.perc
        add(Form::upload01, Upload("/", multiple = false).apply {
            showBrowse = false
            showCancel = false
            showRemove = false
            showUpload = false
            showCaption = false
            explorerTheme = true
            dropZoneEnabled = true
            allowedFileExtensions = setOf("csv")
        })
        add(Form::upload02, Upload("/", multiple = false).apply {
            showBrowse = false
            showCancel = false
            showRemove = false
            showUpload = false
            showCaption = false
            explorerTheme = true
            dropZoneEnabled = true
            allowedFileExtensions = setOf("csv")
        })
    }
}
Both snippets above no work
And the following code works, but I think is not the best way create two formPanel
Copy code
hPanel(spacing = 3) {
    formPanel {
        add(Form::upload0, Upload("/", multiple = false).apply {
            showBrowse = false
            showCancel = false
            showRemove = false
            showUpload = false
            showCaption = false
            explorerTheme = true
            dropZoneEnabled = true
            allowedFileExtensions = setOf("csv")
        })
    }
    formPanel {
        add(Form::upload0, Upload("/", multiple = false).apply {
            showBrowse = false
            showCancel = false
            showRemove = false
            showUpload = false
            showCaption = false
            explorerTheme = true
            dropZoneEnabled = true
            allowedFileExtensions = setOf("csv")
        })
    }
}
When using
FormPanel.add()
you can't control the layout.
But you can use normal KVision DSL, using any containers you want and just
bind()
your form controls to your data model. It would be something like this:
Copy code
formPanel {
                hPanel {
                    upload(uploadUrl = "/", multiple = true) {
                        showBrowse = false
                        showCancel = false
                        showRemove = false
                        showUpload = false
                        showCaption = false
                    }.bind(Form::upload1)
                    upload(uploadUrl = "/", multiple = true) {
                        showBrowse = false
                        showCancel = false
                        showRemove = false
                        showUpload = false
                        showCaption = false
                    }.bind(Form::upload2)
                }
            }
I personally never use
add()
anymore (I looks a lot cleaner with
bind()
for me), but it's still there for compatibility.
f

Francis Mariano

08/17/2022, 6:30 PM
ohhh thank you. Really
bind()
is cleaner. You are incredible.
2 Views