JQuery image upload & refresh using an ASHX file.

I recently finished a solution that uploads an image to my server, and then displays the uploaded image to the user. this is all done “asynchrously”, and it’s within an update panel to boot.

There are a good handful of solutions for doing this. One of the most popular is SWFUpload but I didn’t want to use any flash in my solution – some customers will not have it or it is blocked by some agencies… yes in the real world large agencies and corporations still use IE6 so HTML5… I’ll see you in a few years… back on track.

For the image upload I used a simple JQuery script written by Andris Valums. Out of all the scripts I looked at, this was the most straight forward, easy to implement, and had no inner tweaks that could cause issues in the future.

  1. function initSignature(userID) {
  2.     refreshSignature(userID);
  3.     var button = $('#dUpload'), interval;
  4.     new AjaxUpload("#dUpload", {
  5.         action: "../../handlers/ProcessSignature.ashx",
  6.         name: "Signature",
  7.         data: { "UserID": userID, "Type": "Upload" },
  8.         obSubmit: function (file, ext) {
  9.             if (ext && /^(bmp|jpg|png|jpeg|gif)$/.test(ext)) {
  10.                 // change button text, when user selects file.
  11.                 button.text("Uploading");                            
  12.                 this.disable();//don't upload any more files.
  13.                 interval = window.setInterval(function () {
  14.                     var text = button.text();
  15.                     if (button.text().length < 13)
  16.                         button.text(button.text() + ".");
  17.                     else
  18.                         button.text("Uploading");
  19.  
  20.                     $("#dMessage").text("Uploading " + file);
  21.                 }, 200);
  22.             }
  23.             else {
  24.                 //Extension is not allowed.
  25.                 $("#dMessage").text("Error: only images are allowed");
  26.                 return false;
  27.             }
  28.         },
  29.         onComplete: function (file, response) {
  30.             button.text("Upload");
  31.             //although plugins emulates hover effect automatically it doesn't work when button is disabled
  32.             button.removeClass("hover");
  33.             window.clearInterval(interval);
  34.             $("#dMessage").text(response);
  35.             if (response.indexOf("successful") > -1) {
  36.                 refreshSignature(userID);
  37.             }
  38.  
  39.             //enable upload button
  40.             this.enable();
  41.  
  42.         }
  43.     });
  44. }

Seeing this is inside an update panel I wrapped the initialization script inside a function which I call from the script manager when the UpdatePanel is updated.

Once the image is uploaded I refresh the image by clearing out the containing div and recreating the image element.  This is a tricky one. Even though the image element was deleted and recreated, the SRC was the same so browsers were caching the image. I decided to throw in an extra random value to the URL so the browser would be forced to get the newest image.

  1. function refreshSignature(userID) {
  2.  
  3.     $("#signature").hide();
  4.     var sPath = "../../handlers/ProcessSignature.ashx?type=View&UserID=" + userID + "&d=" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
  5.     $("#signature").attr({ src: sPath });
  6.     setTimeout(function () { $("#signature").imageScale({ maxWidth:450, maxHeight: 50 }) }, 1000);
  7.     $("#signature").fadeOut(100).delay(2000).fadeIn(1000);
  8. }

At the end I scale the image using a very simple JQuery image scaling plug-in. Below are the JS script files I used.

Hope this helps anyone looking to do something similar.

5 Comments

Comments have been disabled for this content.