ASP.NET GridView multiple files upload

Posted on February 19, 2008. Filed under: Uncategorized | Tags: , , , |

This article is about implementing ajax-like files upload in ASP.NET GridView control with each row in the grid having a upload control. After so many responses to my previous articles in making ajax-like file uploads using iframe, I now am writing onto an advanced requirement. The requirement is to add a file upload control in every row of a GridView control and have ajax-like implemenation (using iframes).

I won’t be writing code lines in my blog, as there is no good mechanism in the wordpress blog editor. Hence, I would publish screenshots gif; and I will put the downloadable files at the end.

Let me start with an example db table. Suppose I have a simple table for students and I am required to upload a profile picture for each student. I am also required to show if the student already has a picture uploaded, and disable the upload feature for them. So, here is the simple db structure that I am going to use with some sample data. The column names are self-explanatory.

GridView Upload - db

In the codebehind page, I am binding the GridView control (gvUploads) with a datareader in a subroutine named BindStudentsGrid().

GridView Upload - BindGrid

In the aspx page, I have put a panel with a GridView control and a button control inside it. Once the button is clicked, each GridView row should upload the files, one at a time. In GridView control, I have one templated column, which has an iframe. The source of the iframe is the page itself, and has two parameters passed from querystring: First is MODE=UPLOAD, which lets the page to render only the upload controls (described below), and the second one is ID to pass the primary key (StudentID). If the picture is already uploaded, the iframe is not displayed, but a ‘File Exists’ text is displayed. Also, note the id and name of the iframe has the format upfrm# – the hash is for the StudentID.

GridView Upload - grid template

In the same aspx page, I also have another panel named pnlUpload which displayed the file-upload control in each row of the GridView control, within the iframe that was created above. In this panel, I have a image (imgLoader, to display upload animation), a label (lblMessage, to display upload result), a file upload control, and a hidden button (btnUpload, that initiates the server postback).

GridView upload - upload panel template

To display pnlUpload only for the grid iframe, I have a function CheckIFrameMode() and have invoked it from Page_Load handler. As mentioned above, to find out which panel needs to be displayed, I am using querystring parameter named MODE.

GridView Upload - pageload check

Now, here is the javascript function, that implements the trick. The algorithm is to find all iframes in the grid that has file specified. You can now see why the name of the frame has upfrm# pattern. To make ajax-like upload, animation is displayed by the codes in line#36-37 below. The upload of the file is triggered by hidden button, btnUpload – the code for it is in line#40 below. This function is first invoked by btnStartUpload in pnlMain. The function only triggers one file upload. Next upload is triggered after the completion of the current file upload.

GridView upload - JS function

Finally, what I have is btnUpload click handler routine, which saves the uploaded file and displays appropriate messages. At the end, the js function is called again using RegisterStartupScript() function. The js function when invoked at the client side, processes next row in the grid.

GridView upload - btnUpload handler

And that is all. Here is the screenshot of the result page. File for row#1 and #5 is already there, so there is no upload. For row#2, the file was just uploaded from the page. File for row#3 is in upload process. Row#4 is pending. Row#6 and #7 does not have file specified, so they won’t be processed.

GridView upload - screenshot

For applications like DotNetNuke or something with master pages, the generation of only the upload form (pnlUpload) is not easily possible. You can generate the form using Response.Write() (and ending the response with Response.End()) or you can use a different aspx page for the upload control section.

download the code


Make a Comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

6 Responses to “ASP.NET GridView multiple files upload”

RSS Feed for vinayak’s web whistles Comments RSS Feed

Very good idea! Thanks for your good work. But it doesn’t work with Master Page and Ajax. Is there any way to make it work with Ajax Update Panel.
I don’t need upload progress animation….simple want it work with update panel?

I have a doubt as to how to place the whole gridview from one page to another by just clicking on the button. I f someone could help me out. Pls send me the reply to Thanks in advance

Your code is working fine. I have one doubt on your coding. I use this coding in my C# project. On that i got the following error “The name ‘IIf’ does not exist in the current context”. Can you clarify about IIf.

Yeah, It is Really Good.

It Works Great and Most Helpful and You have given Good Explanation.
Thank You…..

Very good idea! Thanks for your good work. But it doesn’t work with Master Page and Ajax. Is there any way to make it work with Ajax Update Panel.

Where's The Comment Form?

Liked it here?
Why not try sites on the blogroll...

%d bloggers like this: