B4J Tutorial [BANanoWebix] Lesson 22 Uploader - Method 1

Discussion in 'B4J Tutorials' started by Mashiane, Jul 1, 2019.

  1. Mashiane

    Mashiane Expert Licensed User


    We are just left with almost 2 additional widgets to complete on the standard open-source license before we can start building a working app.

    The uploader widget enables one to upload files. There are a various ways this works and we will now look at Method 1. We use this and we link it to a grid element.

    We will create a data-table with an image, when a user clicks the image, a file dialog will appear prompting the user of the image file to select, when that is complete we attempt to upload the file to the server.


    1. We create our page with a spacer layout (notice the padding around the elements)

    pg.Initialize("").SetHeader("Lesson 22: File Uploader - Part 1")
    2. We create a few rows and also the HTML template for our images to be shown on the data-table.

    Dim R1 As WixRow
    "R1").SetTemplate("<p>Click on any photo to change it</p>").SetHeight(50)
        Dim R2 As WixRow
        Dim sPhoto As String
    Dim img As UOENowHTML
    'create the template to show the image
        sPhoto = img.HTML
    The result of this image template is...

    <img id='img' src='./assets/#photo#' style='cursor:pointer !important; width:80px !important; height:80px !important;' >
    What this means is that for that particular column, use the data stored in the 'photo' key and display it within an 'img' tag.

    3. We then create a data-table and then add columns to it and set the data to display. We have saved some image pngs on our assets folder of the app.

    Dim dt As WixDataTable
    "photo").SetHeader(" ").SetWidth(100).SetTemplate(sPhoto).Pop2(dt)
    "name").SetHeader("Employee Name").SetWidth(200).Pop2(dt)
    "job").SetHeader("Job Title").SetFillSpace(True).Pop2(dt)
        Dim data As List
    "id":1"name":"Alex Bret""job":"Manager""photo":"2.png"))
    "id":2"name":"Ruby Goldberg""job":"Lead developer""photo":"1.png"))
    4. We want whenever a user selects the image, a file dialog should appear, then we add an itemClick method to the grid.

    'add a click event per row
        Dim row As Map
    "people", BANano.CallBack(Me,"itemClick",Array(row)))
    ' create an uploader and add it to the page in run-time
        Dim upload As WixUploader
    "image/png, image/gif, image/jpeg")
        fu = pg.AddUploader(upload)
    When a row is clicked, the itemClick sub will be called. This activates the WixUploader class we created named 'upload' which was added to the page with .AddUploader. This is a run-time created component (Method 1)

    Sub itemClick(row As Map)
    Dim rid As String = row.Get("row")
    Dim col As String = row.Get("column")
        rid = pg.CStr(rid)
        col = pg.CStr(col)
    Select Case col
    Case "photo"
    'when a photo is selected, show file dialog
            pg.FileDialog("upload", CreateMap("rowid": rid))
    End Select
    End Sub
    5. The uploader accepts the script to load to upload. One can also indicate the types of files it needs to accept. For this example we are accepting images.

    We will look deeper into the 'upload.php' script later.
    Last edited: Jul 1, 2019
    ilan and joulongleu like this.
  2. Mashiane

    Mashiane Expert Licensed User

    The Upload.PHP script

    Our upload.php script being pointed is supposed to save the file on the assets folder of our server and then when that is done, show the new image on the data-table

    "Access-Control-Allow-Origin: *");
    if (isset($_FILES['upload'])) {
        // Example:
    if(move_uploaded_file($_FILES['upload']['tmp_name'], "../assets/" . $_FILES['upload']['name'])){
            echo '{ "status": "success" }';
        } else {
            echo '{ "status": "error" }';
    } else {
        echo '{ "status": "error" }';
    We save this file on our 'Files' tab in our project.

    For this to be possible, we need to trap the onFileUpload and the onFileUploadError of our uploader widget. We attach these events easily.

    Dim ffile As BANanoObject
    "upload", BANano.CallBack(Me, "onFileUploadError"Array(ffile)))
    "upload", BANano.CallBack(Me, "onFileUpload"Array(ffile)))
    The onFileUpload event, returns a file object that we can manipulate (as per console log)

    context: {rowid: 
    file: File
    lastModified: 1561990069925
    lastModifiedDate: Mon Jul 01 2019 16:07:49 GMT+0200 (South Africa Standard Time) {}
    name: "mashy.png"
    size: 28695
    type: "image/png"
    webkitRelativePath: ""
    __proto__: File
    id: 1561990114028
    name: "mashy.png"
    percent: 100
    progress: 100
    size: 28695
    sizetext: "28.02 Kb"
    status: "success"
    type: "png"
    __proto__: Object
    The methods to run on the events. The status of the upload will be 'success' if the file was uploaded or 'error' if there was an error.

    Sub onFileUpload(ffile As BANanoObject)
    'get the status
    Dim status As String = ffile.GetField("status").Result
    Select Case status
    Case "success"
    'get the row id
            Dim rowid As String = pg.GetRowIDFromContext(ffile)
    'get the row object from data-table
            Dim row As Map = pg.GetItem("people", rowid)
    'get the file name
            Dim fname As String = ffile.GetField("name").Result
    'update the row photo
            row.Put("photo", fname)
    'update the data-table
            pg.UpdateItem("people", rowid, row)
    Case Else
    "Error during file upload!")
    End Select
    End Sub

    Sub OnFileUploadError(ffile As BANanoObject)
    "Error during file upload!")
    End Sub
    Here, the uploader is invisible and is linked to the user image. When the image is clicked, a file dialog is provided. Once the user selects an image, the file is loaded to the server and displayed. So we get the returned 'context' of the uploader i.e. the row. We get the rowid, from the rowid, get the row map from the grid, we read the file name from the uploaded file and then assign this to the 'photo' property which is used in the template '#photo#', as soon as we update the row for that image, the image is shown automatically.
    ilan and joulongleu like this.
  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