Click here to Skip to main content
Click here to Skip to main content

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

Introduction

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.

Background

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);
        base.OnInit(e);
        this.Page.ClientScript.RegisterClientScriptInclude(this.GetType(), 
            "ScriptBlock", 
            this.Page.ClientScript.GetWebResourceUrl(this.GetType(), 
            "WebControls.JScripts.AIMScript.js"));
        string onsubmitstatement = "return AIM.submit(document.forms[0], 
            {'onStart' : " + OnStartScript + ", 
            'onComplete' : " + OnCompleteScript + "})";
        this.Page.ClientScript.RegisterOnSubmitStatement(this.GetType(), 
            "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 = 
                      (UploadButtonEventHandler)Events[EventUploadClickKey];
                if (handler != null)
                {
                    try
                    {
                        WriteTextToClient(handler(this, args));
                    }
                    catch (System.Threading.ThreadAbortException ex)
                    {
                        // do nothing
                    }
                    catch (Exception ex)
                    {
                        WriteTextToClient("An exception occurred - " + 
                                          ex.Message);
                    }
                }
                else
                {
                    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 !!!

License

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

About the Author

Shyam S
Architect
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.

Comments and Discussions

 
QuestionAJAX Script Manager conflicting with the Custom Fileupload Control Pinmemberqingliu628-Jan-10 14:26 
AnswerRe: AJAX Script Manager conflicting with the Custom Fileupload Control PinmemberShyam S28-Jan-10 19:23 
GeneralGmail like file upload PinmemberShyam S23-Jun-09 22:00 
Generalwhen I am working in MasterPage its not wrking PinmemberMember 420977012-Apr-09 20:33 
QuestionHow can I work with this file upload control and .net validation controls? Pinmemberkaivanshah19-Jan-09 19:38 
Generalcomplements PinmemberMember 376734820-Oct-08 2:27 
GeneralNice article, but... Pinmemberdennieku9-Oct-08 23:15 
GeneralRe: Nice article, but... Pinmemberdennieku9-Oct-08 23:16 
GeneralThe uploaded file location Pinmemberarnonzamir3-Sep-08 14:30 
GeneralRe: The uploaded file location Pinmemberctembe11-Oct-08 0:18 
QuestionProblem with postback PinmemberMember 35951729-May-08 7:45 
AnswerRe: Problem with postback PinmemberShyam S29-May-08 18:18 
GeneralRe: Problem with postback PinmemberMember 420977013-Apr-09 3:10 
GeneralDynamically use file upload control Pinmembershahgun27-Jun-07 23:06 
GeneralDOTNET 2 PinmemberRichardOfMercator31-May-07 0:59 
GeneralMissing the FileUploadControlTest Project Pinmemberclivenyong11-Apr-07 23:22 
GeneralDon't work with UpdatePanel Pinmemberdkc_project5-Mar-07 22:08 
GeneralRe: Don't work with UpdatePanel Pinmembershyamproxy5-Mar-07 22:48 
GeneralRe: Don't work with UpdatePanel Pinmemberyaniar28-Mar-07 15:09 
GeneralNice article....Thanks to shyamproxy PinmemberNajeed5-Mar-07 19:30 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 4 Mar 2007
Article Copyright 2007 by Shyam S
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid