B4J Question [BANanoVueMaterial] Update TextField value from FileInput

Mashiane

Expert
Licensed User
Longtime User
In terms of VueJS, one can set and get values of "value" attribute using a vmodel. To update the vmodel with BANanoVueMaterial one uses.

B4X:
vm.SetData(<vmodelname>, "value")

And to get the data stored, one would use

B4X:
Dim data As string = vm.getdata(<vmodelname>)

For example, you would create a file input like this: (this code is in the Demo project)

B4X:
vm.CreateFileInput("fi1", Me).SetMultiple(True).SetLabel("File input").SetVModel("myfiles").SetPlaceholder("Please choose some files").AddToContainer(cont, 1, 1)

So to get the selected file name, one would use the vmodel assigned to the file input.

B4X:
Dim selFile as string = vm.getdata("myfiles")

However the best way to do such for a file select component is via the change event. When one creates a file input, a _change event is linked to the control as soon as one adds a callback function. So, we defined the id of the file input as "fi1", so the change event to create will be fi1_change, defined as

B4X:
'file change
Sub fi1_change(fileList As List)
    Log("fi1_change")
    For Each obj As Object In fileList
        Dim fo As FileObject = BANanoShared.GetFileDetails(obj)
        Log(fo.filename)
        Log(fo.fileDate)
        Log(fo.filesize)
        Log(fo.filetype)
        Log("***")
    Next
End Sub

In the example above, we created a "multiple" files file select. So in the change event, we loop through each file, get its details with BANanoShared.GetFileDetails(?), this returns a filename, filedate, filesize, filetype etc. We cannot get the filepath though.

Now, lets create the text field

B4X:
Dim mytxt As VMTextField = vm.CreateTextField("t1", Me).SetLabel("File Name").SetHint("Selected file name").SetPersistentHint(True).SetVModel("myfilesx")

If we set the vmodel for the textfield as "myfiles", the same vmodel for the file input, each time you change the file name, it should update the text field.

Another option would be, on the fi1_change event, get the fo.FileName and then execute

B4X:
vm.SetData("myfilex", fo.FileName)

Ta!
 
Upvote 0
Top