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

Discussion in 'B4J Libraries & Classes' started by Mashiane, Jul 23, 2018.

  1. Mashiane

    Mashiane Expert Licensed User

    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

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

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

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

    Code:
    Sub Page_FileUploaded(FileName As String, success As Boolean)
        myToastId = myToastId + 
    1
        
    If success Then
            
    page.ShowToast("toast" & myToastId, "toastgreen""File " & FileName & " uploaded!"3000False)
            uploads = uploads + 
    1
        
    Else
            
    page.ShowToast("toast" & myToastId, "toastred""File " & FileName & " not uploaded!"3000False)
        
    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.
     

    Attached Files:

    Last edited: Jul 23, 2018
    amaxco, Cableguy and joulongleu like this.
  2. Mashiane

    Mashiane Expert Licensed User

    Added functionality to trap the OnChange event..

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

    Code:
    Sub mu_changed(value As Map)
        
    Dim files As String = value.Get("value")
        
    page.Msgbox("",files,"Error","OK",False,"","")
    End Sub
     
    Last edited: Jul 23, 2018
    amaxco likes this.
  3. Mashiane

    Mashiane Expert Licensed 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...

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

    Code:
    mu.Update(DownloadPath,FileName)
    Where downloadpath = "../uploads/"

    Enjoy...
     

    Attached Files:

    inakigarm and Don Oso like this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice