B4J Tutorial [ABMaterial]: Using ABMFileInput for Profile Pictures

For my case study...


I needed a way to upload user profile images to the server and link these to user profiles. The use of the ABMFileInput has touched on some of my screens.

To upload images to the server, ABM provides the ABMFileInput and ABMUpload controls.

You will recall that Harris's Lesson 3A, touched on how to read records and also display images from a server inside an ABMTable. You can always refer to that tutorial for more details.

For my needs I had to go one step back, getting the images to the server before they are displayed on the ABMTable. The attached video shows how this plays around, with a computer voice. #VoiceNotSoNice

So what happens here? When a user adds / update a user profile, to update the image

1. A user clicks the ABMFileInput
2. The selected file is uploaded to the server, this is then linked to the ABMImage Control.
3. The user records is saved to the db with the link to the profile picture.

After the user selects the image, the file is uploaded to the server. This is done on the change event...

Sub fileinpprofileupl_Changed(value As String)
    Dim msgenpeople As ABMModalSheet
    msgenpeople = page.ModalSheet("msgenpeople")
    Dim fileinpprofileupl As ABMFileInput = msgenpeople.Content.Component("fileinpprofileupl")
    fileinpprofileupl.UploadToServer 'Here the file is uploading
End Sub

After the file is uploaded, the image on the Modal Sheet is updated with the new image

Sub Page_FileUploaded(FileName As String, success As Boolean)
    myToastId = myToastId + 1
    If success Then
        page.ShowToast("toast" & myToastId, "toastgreen", "File " & FileName & " uploaded!", 3000, False)
    Else
        page.ShowToast("toast" & myToastId, "toastred", "File " & FileName & " not uploaded!", 3000, False)
        page.ws.Flush
        Return
    End If
    Dim msgenpeople As ABMModalSheet
    msgenpeople = page.ModalSheet("msgenpeople")
    Dim fileinpprofileupl As ABMFileInput = msgenpeople.Content.Component("fileinpprofileupl")
    fileinpprofileupl.Clear
    Dim imgprofileimg As ABMImage = msgenpeople.Content.Component("imgprofileimg")
    imgprofileimg.Source = "../uploads/" & FileName & "?" & DateTime.Now
    imgprofileimg.refresh
    page.ws.Flush ' IMPORTANT
End Sub

On Save, the contents of the modal sheet are read and saved as a map... This has been the norm eversince the ABMGenerator.

For the ABMImage, we only want the part before the question mark. We use DateTime.Now to ensure that the latest image is displayed everytime. Using ABMShared.Version caches the ABMImage in memory and it wont be refreshed should the image be changed when displaying ABMImages.

Sub msgenpeopleGetContents() As Map
    Dim pMap As Map
    pMap.Initialize
    Dim msgenpeople As ABMModalSheet
    msgenpeople = page.ModalSheet("msgenpeople")
    Dim imgprofileimg As ABMImage = msgenpeople.Content.Component("imgprofileimg")
    Dim fileinpprofileupl As ABMFileInput = msgenpeople.Content.Component("fileinpprofileupl")
    Dim txtfullname As ABMInput = msgenpeople.Content.Component("txtfullname")
    Dim cbocompanyid As ABMCombo = msgenpeople.Content.Component("cbocompanyid")
    Dim txtemailaddress As ABMInput = msgenpeople.Content.Component("txtemailaddress")
    Dim txtmobilephone As ABMInput = msgenpeople.Content.Component("txtmobilephone")
    Dim txtjobtitle As ABMInput = msgenpeople.Content.Component("txtjobtitle")
    Dim txtprojectrole As ABMInput = msgenpeople.Content.Component("txtprojectrole")
    pMap.put("profileimg", ABMShared.MvField(imgprofileimg.Source,1,"?"))
    pMap.put("profileupl", fileinpprofileupl.GetFileName)
    pMap.put("fullname", txtfullname.Text)
    pMap.put("companyid", cbocompanyid.GetActiveItemId)
    pMap.put("emailaddress", txtemailaddress.Text)
    pMap.put("mobilephone", txtmobilephone.Text)
    pMap.put("jobtitle", txtjobtitle.Text)
    pMap.put("projectrole", txtprojectrole.Text)
    Return pMap
End Sub

As most concepts have been explained previously by others here in the forum, this will hopefully add to the immunition forging anything ABM.

NB: I am using SQLite for my backend, so you can tweak for your needs, it should'nt be hard.