Phase 10: Profile Pictures

One of the features added to user profiles was a profile picture. Using this feature a user can change their profile picture using an AJAX form provided on their profile page.

Figure - Player Profile

The user can drag and drop files on the drop area to upload a picture

Figure - Changing the Profile Picture using Drag & Drop

Alternatively, the user can click the drop area to display a traditional file browser.

Figure - Changing the Profile Picture Using the Traditional File Browser

Once the user has uploaded their image, the profile picture is automatically changed in the profile page.

Figure - Updated Profile Picture

Whilst uploading, the uploader displays a progress bar showing the image being uploaded and its file size.

The upload image script is an open-source free script provided by Andrew Valums at:

http://valums.com/ajax-upload/

The script uses a javascript file to receive the file selected by the user. It then supports several back-ends (or indeed a custom written one in any language) which handles the uploading of the file and the insertion of the file into the database.

Once the image is uploaded, Javascript us used to retrieve the filename and send it to the PHP script for processing and uploading to the database:

//File Uploader
var uploader = new qq.FileUploader({
    // pass the dom node (ex. $(selector)[0] for jQuery users)
    element: document.getElementById('file-uploader'),
    // path to server-side upload script
    action: 'fileuploader/doupload.php',
    onComplete: function(id, fileName, responseJSON)
    {
    oFormObject = document.forms['form-player-profile-submit-comment'];
    var username = oFormObject.elements["loggedUsername"].value;

var navigate="ProfileEngine.php?mode=registerImg&username=" + username + "&filename=" + fileName;

$.ajax({
type : 'Get',
url  : navigate,
async : true,
cache : false,

success : function(text) {
document.getElementById('my-profile-pic').src="img/profiles/"+fileName;
},
error : function() {
//Do nothing
}
});  
    }
});

At this point the image is registered and updated on the form.

A number of hurdles had to be overcome in order to use this script. When a file is uploaded with a name equal to a name already used (such as two images having the name 'me.png') the script renames the OLD image by appending a random number between 1 and 99 (such as me76.png). The problem with this is that the database would have registered me.png as being a particular user's profile image, and this action invalidates the database.

A solution would have been to rename the profile image to the username of the user upon upload, however this would also have proven problematic - as the shortened name of the user may be the same (ex: nikolai@domain1.com and nikolai@domain2.com). The proper solution is to use the entire username as the image filename, but yet again this presents problems with special characters like '@' in the filename.

The only other solution left is to generate a number for the image filename corresponding to the player id (primary key) in the database and then store the image with this name. However, due to time constraints, this has been added as a future improvement.

The script also seems to have some bugs related to image file size - it was reporting images as being over 10MB, when in fact they were only around 40Kb. To overcome this problem, the size-checking code was temporarily commented out (the size is hence handled by the PHP max_filesize directive). This will be tackled in future releases.