Image Attachments in Widgets (Part 1)

[Richard Dunmow]

Reading the image in the client script.

 

Overview & Requirement

 

I was given a requirement recently to build a set of widgets to allow people attending an event to fill in some basic information and take a selfie to be displayed on a large gallery style page in the event. The widgets needed to be accessible without the need to login so people could easily and quickly fill in the information.

This seemed fairly straight forward, but I was going to need to invoke the phones camera, as you will see, getting the phone to take the picture was easy, but processing and storing the images proved to be more complicated than was envisaged at first.

Other problems were faced because the user wasn't logging into to the NOW platform, but we will cover this off over the next few blogs.

The widget itself was simple, it would collect the attendee's name, some basic information about them and a selfie. This data would then be saved to the attendee table and the sys_id of the inserted record would be sent back to allow updates of the record as needed.

In this blog (Part I) we are going to talk about how the image field was captured and then displayed on screen. Further blog entries will deal with saving to the database and retrieval of the image data. 

 

Capturing the Image

 

In HTML 5 there is a construct that can be used to invoke the camera on a smartphone or tablet, or will pop up an image file dialog on a computer.

 

<input type="file" name="file" id="file" capture="camera" accept="image/*"/>

 

This tag will invoke the smart phones camera and return a file to the client script. The issue then was how do you read the file and what do you need to do to get it to display on screen and also be saved back to the table. In this example we have kept the ID and the Name attributes the same.

 

Normally I would add the ng-model construct to pass information to the client script, but using the approach didn't work as reading the file using FileReader() gave an error back about the file not being a blob.

 

TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

 

So in this case we need to specify a function to read the file once the user has selected a file or taken a picture. This uses the ng-file-select construct as shown below.

 

<input type="file" name="file" id="file" capture="camera" accept="image/*" ng-file-select="c.loadFile()"/>

 

The function "loadFile()" needs to be added to the main client script block

 

c.loadFile = function() {

    var reader = new FileReader();


    //Add an event listener so that once the file / picture has
    //been loaded it can be processed as the file may be large.    
    reader.addEventListener('load', function () {

        c.data.image = reader.result;

    }, false);

    var file = 
    document.querySelector('input[type=file]').files[0];
    c.data.loadingImage = true;

    //if a file has been selected, we need to read it.
    if (file) {
        
        //Need to save the additional information about the file
        c.data.fileSize = file.size;
        c.data.fileType = file.type;
        
        //Now read the file
        reader.readAsDataURL(file);
    }
    
}

 

In this code, I used the document.querySelector to find the input tag and since this was a single file being selected, I have simply asked for the first element in the files[] array.

 

The event Listener is needed because if we tried to set c.data.image field straight away with the result, the file will probably not be loaded. Putting the image into c.data.image means that it can be displayed on screen using the following tag and also that the image itself will be passed to the server side script when we invoke the server.update() function.

 

<img src="{{ c.data.image }}" width="100%">

 

Adding the width="100%" to the tag means when the image is shown, it is scaled to the screen screen of the device, in this case showing the image nicely on the mobile display.

 

The image will be read and displayed in the HTML of the widget. In Part II, I will cover off the challenges encountered in saving the image data to the database field.