Complete code example using blueimp jQuery file upload control in Asp.Net.

I struggled a lot especially to make my code work in IE (7.0, 8.0, 9.0) version when trying to post files data to the server. Once we posted to the server I want to get the file storage details and other attributes of the file posted as JSON object from the server.

For this I posted using blueimp jQuery file upload plugin to post and using a handler on the server side to respond for this request. While doing this I found few interesting problems with IE, like getting warning as below.

jQuery file upload control in asp.net

Once I fixed the issue with this, I was able to post to the server but not getting the JSON content as “fileuploaddone” event is not firing up. This is because I had the content type as

Application/json” in handler. Once I changed the response content type as “text/plain” it started working and able to get the event. But as IE don’t jqXHR object we should tweak our code

to get the JSON data (from server) and binding them to the download template in the page. In fact somehow IE is posting the full client name (c:\tmp\file.jpg)

in the htppposted file object (in the server handler) where as other browsers giving only file name like “file.jpg”. for that I am handling the IE request differently in the server.

All these issues I figured out and fixed and I am posting the source code at the below url.

Download: http://www.webtrendset.com/wp-content/uploads/2011/06/Asp.NetjQueryFileUpload.zip


Related Posts

6 Replies to Complete code example using blueimp jQuery file upload control in Asp.Net.

  1. track says:

    I noticed a small bug in the example code when uploading multiple file with one POST.
    With the foreach loop I get the same file multiple times, because every file has the same key (string file is always the same)

    I fixed it by changing it to a for loop and accessing the files by index.
    for (int i = 0; i < context.Request.Files.Count; i++)
    {
    HttpPostedFile hpf = context.Request.Files[i] as HttpPostedFile;

    Thanks for your example :)

  2. Scott says:

    You are a good person! Thx for the IE heads-ups!!!

  3. Tony says:

    I’m going to try this now. I hope I can also make it work. Thanks to guys like you who helps development with IE easier. ^^

  4. Philip says:

    Hi,
    I have struggeled using your script, since it always returned “Empty Result”. I have located the error to line 104 in jQuery.fileupload-ui.js:

    var file = ($.isArray(data.result) && data.result[index]) || { error: ‘emptyResult’ };

    which should be replaced by

    var file = ($.isArray(data.result.files) && data.result.files[index]) || { error: ‘emptyResult’ };

    I must say the expression is very evil, and it took me a while to understand what it actually did. I think it is a misuse of the operator syntax.

Leave a Reply

Before you post, please prove you are sentient.

Sum of 8 + 4 ?

email lists