Client Side Image Resize and Base64 Conversion
Posted By: Alex.Cottner on February 4th, 2014 in General
No Gravatar

The following requires some HTML5 features, so be sure to consult a compatibility chart before throwing it into a customer’s environment.

I needed a way for a user to upload an image as a base64 string. This could be happening from a poor bandwidth connection, so the usual server-side resize/encode wasn’t going to be an option. After a little bit of research my proof of concept looked like this.

I didn’t see any other examples of this so I thought I would post it here.

// make the file upload utility on page load
var photoField = dojo.byId("photoDiv");
var fu = document.createElement('input');
fu.type = "file";
fu.accept = "image/jpg,image/jpeg"; = "fuContactPhoto";
fu.onchange = photoConvert;

function photoConvert() {
    var fu = document.getElementById("fuContactPhoto"); // grab the file browser
    var f = fu.files[0]; // grab the file
    var fr = new FileReader(); // create a new file reader
    fr.readAsDataURL(f); // base 64 it
    fr.onload = function() {
        var tempImage = new Image();
        tempImage.src = fr.result; // to get the base64 result
        setTimeout(function() { // adding a .2 second delay because of some strange timing problems on ios
        var height = tempImage.height;
        var width = tempImage.width;
        if (height > 100) { // max height for our purposes is 100 pixels
            width = width / (height / 100);
            height = 100;
        if (width > 150) { // max width for our purposes is 150 pixels
         height = height / (width / 150);
         width = 150;
        var c = document.createElement('canvas');
        c.width = width;
        c.height = height;
        var ctx = c.getContext("2d");
        ctx.drawImage(tempImage, 0, 0, width, height);
            var b64str = c.toDataURL("image/jpeg"); // grab a base64 copy of the resized image as a jpeg
        document.getElementById('photoBase64Value').value = b64str.replace("data:image/jpeg;base64,", ""); // set hidden field with our value to save
        }, 200);

Make an editable grid refresh on email Drag & Drop – SalesLogix8
Posted By: Alex.Cottner on November 4th, 2013 in General
No Gravatar

I extended business rules for a customer to automatically create ticket activities when an emailed history record is associated with a ticket. This was done to mirror logic from their old LAN environment. However they pointed out that when they dragged & dropped an email onto a ticket the grid didn’t refresh automatically.

After investigating the NotesHistoryList I quickly discovered that I could inject this into my quickform without any hassle. The injection point here is the contextualCondition property of the editable grid.

this.onHistoryChanges = function (history) {
this.connections = [];
this.connections.push(dojo.subscribe('/entity/history/create', this, this.onHistoryChanges));
this.connections.push(dojo.subscribe('/entity/history/change', this, this.onHistoryChanges));

Now whenever a history record is added or an email is Dragged & Dropped in, the ticket activities grid will automagically refresh for the user (just like the Notes/History grids do).

Adding Keyboard Input to Dojo Select Controls (
Posted By: Alex.Cottner on November 15th, 2012 in Dojo, General, Javascript
No Gravatar

I ran into a situation yesterday where I needed to extend the functionality of the control so it could have proper keyboard input. Power users want to be able to tab through their forms and use the keyboard to get work done quickly. The stock select control from dojo only allows for use with a mouse and some pretty basic keyboard input. To change this, I just needed to override a couple methods on my controls and setup a new property.

Here is an example creating a new select control.

Lock down the Mass Update form
Posted By: Alex.Cottner on February 10th, 2011 in Programming, SugarCRM
No Gravatar

Something that I find very quirky with Sugar is the fact that they allow the Mass Update form to be accessible for all users. This can cause serious problems with data integrity if you let end users have the kind of power this form has.

When browsing Sugar’s forum I see topics all the time about how to remove or lock down the mass update form based on specific users, teams, or remove it entirely. There are a couple of different ways of doing this. A few include non-upgrade safe ways because we have to modify core files, and 1 is an upgrade safe way.