B4J Library [ABMaterial]: Attempting a profile picture file chooser

Ola

This version of a file chooser is intended for one to change a profile picture or any picture for that matter.

• Assumptions, you can use this to show a current profile picture / any picture anyway.
• When one wants to change the picture, one can click on the image which will activate a file input control
• When the image is selected, the file will be uploaded and then displayed

In Class_Globals

Dim mu As MashUpload
    Dim uploads As Int = 0   'IMPORTANT

uploads will store the number of files to upload if Multiple files is set True (even false), needed to reset the control.

In ConnectPage

mu.Initialize(page,"mu",True,"../images/eric.png","80px","80px")
    mu.ZDepth = ABM.ZDEPTH_2
    page.Cell(2,1).AddComponent(mu.ABMComp)

On file change event, we want to upload the file(s) to the server

'upload a file as soon as its selected
Sub mu_changed(value As Map)
    'reset the number of files to upload
    uploads = 0
    'upload the files to the server
    mu.upload
End Sub

Then finally, when the files are uploaded, we increment the uploads so that we can clear the component.

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)
        uploads = uploads + 1
    Else
        page.ShowToast("toast" & myToastId, "toastred", "File " & FileName & " not uploaded!", 3000, False)
    End If
    Dim actualFile As String = File.combine(File.DirApp, DownloadFolder & FileName)
    page.ws.Flush ' IMPORTANT
    
    'if we have uploaded enough files, clear
    If mu.GetCount = uploads Then
        mu.clear
    End If
End Sub

To Do

1. Changing the profile picture via code after a file is uploaded.

 

[Mashiane]

Added functionality to trap the OnChange event..

This returns a json string of the file names...

Sub mu_changed(value As Map)
    Dim files As String = value.Get("value")
    page.Msgbox("",files,"Error","OK",False,"","")
End Sub

 

[Mashiane]

Finally, as much as you can load multiple files with this, when you have to only upload one file to change the profile picture, you need to turn off multiple uploads.

An update method has been added to ensure that the image is uploaded...

'update the image to show uploaded file
Sub Update(Folder As String, FileName As String)
    Dim script As String = $"var img${compid} = document.getElementById('img${compid}');
    img${compid}.src = "${Folder}${FileName}?${DateTime.now}";"$
    Page.ws.Eval(script, Array As String(compid))
End Sub

This is called on Page_FileUploaded.

    mu.Update(DownloadPath,FileName)

Where downloadpath = "../uploads/"

Enjoy...