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.

MashUpload.gif

  • 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

B4X:
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

B4X:
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

B4X:
'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.

B4X:
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.
 

Attachments

  • MashUpload.bas
    6.3 KB · Views: 331
Last edited:

Mashiane

Expert
Licensed User
Longtime User
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.

MashUploadUpdate.gif


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

B4X:
'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.

B4X:
    mu.Update(DownloadPath,FileName)

Where downloadpath = "../uploads/"

Enjoy...
 

Attachments

  • MashUpload.bas
    6.6 KB · Views: 326
Top