Hello, I am building a simple page and I need to o...

# kvision

[Francis Mariano]

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 ????

[Robert Jaros]

Simple answer: you can't

[Robert Jaros]

Browser security will not allow you to do this.

[Robert Jaros]

But you can upload file.

[Robert Jaros]

You can use Upload component to implement this.

[Robert Jaros]

User will have to choose those two files (or use D&D).

[Robert Jaros]

Check this chapter:
https://kvision.gitbook.io/kvision-guide/2.-frontend-development-guide/form-controls-guide#client-side-file-handling

[Francis Mariano]

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.

[Francis Mariano]

Is it possible render only the D&D area ??

[Robert Jaros]

This should do the trick:

uploadInput(uploadUrl = "/", multiple = true) {
                showBrowse = false
                showCancel = false
                showRemove = false
                showUpload = false
                showCaption = false
            }

[Francis Mariano]

tks a lot. I missed of showCaption = false

[Francis Mariano]

hello, I here again 🙂 . I am trying to put two D&D area inside a HPanel, but with no success until now.

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")
        })
    })

[Francis Mariano]

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")
        })
    }
}

[Francis Mariano]

Both snippets above no work

[Francis Mariano]

And the following code works, but I think is not the best way create two formPanel

[Francis Mariano]

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")
        })
    }
}

[Robert Jaros]

Check this chapter: https://kvision.gitbook.io/kvision-guide/2.-frontend-development-guide/forms#manual-binding

[Robert Jaros]

When using FormPanel.add() you can't control the layout.

[Robert Jaros]

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:

[Robert Jaros]

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)
                }
            }

[Robert Jaros]

I personally never use add() anymore (I looks a lot cleaner with bind() for me), but it's still there for compatibility.

[Francis Mariano]

ohhh thank you. Really bind() is cleaner. You are incredible.