Image Attachments in Widgets (Part 2)

[Richard Dunmow]

Sending the image to the server.

In part 1 we covered off how to load the image / picture and display it on screen. The next part of the puzzle is to then get the image to be attached to the database record for this widget.

Processing the Raw Image Data.

The information that gets passed from the client to the server is BASE64 version of the image, so some additional work needs to be done to clean up the image before it can be saved to the database as an attachment. Below is a snippet of the beginning of the image that has been read.

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAA2ADYAAD/4QCARXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAADYAA

You can see that the start of the image has the basic information about the image "data:image/jpeg;base64,". Before we can process this image, we need to extract the image data, which means we need to strip off the header.

//Code to strip out the header information of the image file.
//Code created by Simon Morris@ServiceNow.
var regex = /data:[a-z]\/[a-z];base64,(.*)/gm;
var m;
var imageData;
while ((m = regex.exec(input.image)) !== null) {

     // This is necessary to avoid infinite loops with 
     // zero-width matches

     if (m.index === regex.lastIndex) {
         regex.lastIndex++;
     }

     // The result can be accessed through the `m`-variable.
     m.forEach(
        function(match, groupIndex)
        {
            console.log('Found match, group ' + groupIndex + ': ' +  match);   
            imageData = match;
        }
    );
}

Now that we have the raw image file, we can now attach it to the database record. On the now platform, images are stored in the sys_attachment table and we need to call a set of functions that will process and insert the attachment correctly onto the record.

Saving the Image to the database.

In part 1, we extracted the image file type from the file and added it to the data that will get passed to the server. Now we need to use that information.

//Now attach the image file to record
var eccGr = new GlideRecord('ecc_queue');
eccGr.agent = 'Posting a picture to a User Record';
eccGr.topic = 'AttachmentCreator';
eccGr.name = 'image:' + input.fileType;
eccGr.source = 'x_snc_attendee:' + sysId;
eccGr.payload = imageData;
eccGr.insert();

The "x_snc_attendee" is the name of the table in my example, obviously in your code this will be different. ImageData is the processed data from the client with the headers stripped off.

The "eccGr.name = 'image:' + input.fileType;" line of the code contains the field name that the image is to be inserted into as well as the fieldType data value that we extracted from the image at the client side. So if your database field is called something other than "image", you need to update this.

Once this code is executed the ECC Queue then processes the attachment and it then gets added to the image field called "image" in our table.

In Part III we will talk about how you retrieve the image and display it back in the widget.