What I've Learned (4 of 4)

by Michael Clark
April 16, 2012 9:05 AM

The last post in this series takes me back to one of the first projects I worked on - Only1 Version 4. I previously wrote a post about this project detailing how the new version was different than its previous incarnations. This post will attempt to describe how the image verification process works.

When working on this project, we looked at various options to do image verification - including licensing a third party product. In the end, we decided to write our own solution. 

To accomplish this, I first started by parsing a username (mclark, jdoe, etc.) into a set a 10 integers ranging from 1-100 using an encryption library released on CodePlex called CTI Text Encryption. This library has a set of options that allowed me to determine the output block size (2 in this case), output format (numbers only), encryption key, and even the separator. It's a pretty powerful library. For instance, the username "jdoe" might encrypt to 2-10-72-64-98-32-33-66-7-99. The library will return duplicate numbers so I had to handle those cases in my code by incrementing one of the duplicates by one.

Once I got the encrypted name into a set of 10 integers, I matched up each integer with a row in our database. The filenames of each of our images were placed in a database with unique ID numbers - for instance, "dog1.jpg" may be ID1. I then returned the file names to my code and placed them on the page.

Sounds pretty easy, but there was quite a bit of research and thought put into this. Overall, I was very pleased with how it turned out.


What I've Learned (3 of 4)

by Michael Clark
April 2, 2012 10:13 AM

The third piece of knowledge I've picked up on recently also comes from the Admissions Checklist site. The site allows each user the ability to update their profile with new addresses, phone numbers, social media accounts, etc. It also provides an upload feature so the prospective student can add an image to their profile. This proved to be a little tricky at first, but that was mainly because I was unfamiliar with parsing a JSON object.

The goal behind this was to allow the user to upload the image, have it display in a thumnail while editing their profile, then click to save their changes once finished - all without a postback. To facilitate this, I used the jQuery File Upload plug-in. The plug-in provides several options such as multiple file upload, file type restrictions, drop zones, etc. The HTML code to use the file upload plug-in uses a simple HTML input tag with a type of "file".

Once that is in place, the javascript to use is -

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        url: 'path/to/handler',
        done: function (e, data) {
            $.each(data.result, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>

The file upload handler was probably the trickiest part. I had never written one before so I was pretty lost for a couple of days trying to figure it out. I ended up writing mine as a C# .ASHX file. The important things to keep in mind are that the handler interfaces with IHttpHandler (so I could process the HTTP request with my custom handler) and IRequiresSessionState (so I could name the file appropriately using session variables). Once getting the request, it was a simple matter of getting the file information from the HttpContext.

Once saving the user's image to a temporary location, I then implemented a Javascript call to a web method that wrote the user's profile changes to a database.

Looking back on it now this all seems pretty simple to me, but at the time, it took me a week or so to get this implemented properly.