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.