Click here to Skip to main content
13,149,099 members (54,228 online)
Click here to Skip to main content
Add your own
alternative version


92 bookmarked
Posted 4 Mar 2007

Gmail like file upload button

, 4 Mar 2007
Rate this:
Please Sign up or sign in to vote.
An inherited button which helps to upload files using the hidden IFRAME technique
Screenshot - GmailUpload.gif


This is an inherited button control which can perform file upload like in gmail manner. The button uses the inherited IFRAME technique to avoid full page rendering so that user will get a nice experience.


I have searched for an article to perform GMail like file upload. It seems that we cannot perform file uploading using AJAX. I got some nice javascript from webtoolkit which was written to operate with PHP. The script uses the hidden IFRAME technique. Here I have created an derived ASP.NET Button control which can perform the trick.

Using the code

To open the project, unzip it and open the file FileUploadControlTest.sln Open the file UploadButton.cs. The OnInit method will register the LoadComplete event, include the javascript which is a web resource (for more information on webresource click here), and sends the onsubmit statement to client.

/// <span class="code-SummaryComment"><summary /></span>
/// Basic registration of events
/// <span class="code-SummaryComment"></summary /></span>
/// <param name="e" /></param />
protected override void OnInit(EventArgs e)
    this.Page.LoadComplete += new EventHandler(Page_LoadComplete);
    string onsubmitstatement = "return AIM.submit(document.forms[0],
        {'onStart' : " + OnStartScript + ",
        'onComplete' : " + OnCompleteScript + "})";
        "OnSubmitScript", onsubmitstatement);

The onsubmit script creates a new hidden IFRAME in the dom and sets the target of the form to this IFRAME. So the section the user is seeing will not get redrawn after postback. In the Page_LoadComplete event of the page, we will get the FileUpload control filled with the uploaded file. We will call the event handler in the Page_LoadComplete method. The return text after executing the event handler will be returned to the client.

/// <span class="code-SummaryComment"><summary /></span>
/// After completing page load, call the event handler on page to perform
/// operations on uploaded file
/// <span class="code-SummaryComment"></summary /></span>
/// <param name="sender" /></param />
/// <param name="e" /></param />
void Page_LoadComplete(object sender, EventArgs e)
    if (Page.IsPostBack)
        if (this.Parent.FindControl(RelatedFileUploadControlId) != null)
            FileUpload fu =
    this.Parent.FindControl(RelatedFileUploadControlId) as FileUpload;
            UploadButtonEventArgs args = new UploadButtonEventArgs(fu);
            UploadButtonEventHandler handler =
            if (handler != null)
                    WriteTextToClient(handler(this, args));
                catch (System.Threading.ThreadAbortException ex)
                    // do nothing
                catch (Exception ex)
                    WriteTextToClient("An exception occurred - " +
                WriteTextToClient("Handler not registered");

In the onload method of IFRAME, we will call the function registered as OnCompleteScript, and pass the text inside the IFRAME which is the response text.

Points of Interest

The hidden IFRAME technique is an old one but in some complex situations, it will help us !!!


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Shyam S
India India
I am a software architect in a reputed software firm. Mainly I am dealing with presentation layer like creation of re-usable framework, controls, pages etc.

You may also be interested in...

Comments and Discussions

QuestionAJAX Script Manager conflicting with the Custom Fileupload Control Pin
qingliu628-Jan-10 14:26
memberqingliu628-Jan-10 14:26 
AnswerRe: AJAX Script Manager conflicting with the Custom Fileupload Control Pin
Shyam S28-Jan-10 19:23
memberShyam S28-Jan-10 19:23 
GeneralGmail like file upload Pin
Shyam S23-Jun-09 22:00
memberShyam S23-Jun-09 22:00 
Generalwhen I am working in MasterPage its not wrking Pin
Member 420977012-Apr-09 20:33
memberMember 420977012-Apr-09 20:33 
QuestionHow can I work with this file upload control and .net validation controls? Pin
kaivanshah19-Jan-09 19:38
memberkaivanshah19-Jan-09 19:38 
Generalcomplements Pin
Member 376734820-Oct-08 2:27
memberMember 376734820-Oct-08 2:27 
GeneralNice article, but... Pin
dennieku9-Oct-08 23:15
memberdennieku9-Oct-08 23:15 
GeneralRe: Nice article, but... Pin
dennieku9-Oct-08 23:16
memberdennieku9-Oct-08 23:16 
GeneralThe uploaded file location Pin
arnonzamir3-Sep-08 14:30
memberarnonzamir3-Sep-08 14:30 
GeneralRe: The uploaded file location Pin
ctembe11-Oct-08 0:18
memberctembe11-Oct-08 0:18 
QuestionProblem with postback Pin
Member 35951729-May-08 7:45
memberMember 35951729-May-08 7:45 
AnswerRe: Problem with postback Pin
Shyam S29-May-08 18:18
memberShyam S29-May-08 18:18 
GeneralRe: Problem with postback Pin
Member 420977013-Apr-09 3:10
memberMember 420977013-Apr-09 3:10 
GeneralDynamically use file upload control Pin
shahgun27-Jun-07 23:06
membershahgun27-Jun-07 23:06 
GeneralDOTNET 2 Pin
RichardOfMercator31-May-07 0:59
memberRichardOfMercator31-May-07 0:59 
GeneralMissing the FileUploadControlTest Project Pin
clivenyong11-Apr-07 23:22
memberclivenyong11-Apr-07 23:22 
GeneralDon't work with UpdatePanel Pin
dkc_project5-Mar-07 22:08
memberdkc_project5-Mar-07 22:08 
GeneralRe: Don't work with UpdatePanel Pin
shyamproxy5-Mar-07 22:48
membershyamproxy5-Mar-07 22:48 
GeneralRe: Don't work with UpdatePanel Pin
yaniar28-Mar-07 15:09
memberyaniar28-Mar-07 15:09 
GeneralNice article....Thanks to shyamproxy Pin
Najeed5-Mar-07 19:30
memberNajeed5-Mar-07 19:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170924.2 | Last Updated 4 Mar 2007
Article Copyright 2007 by Shyam S
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid