Skip to main content
Email Password   helpLost your password?
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.

    /// <summary />

    /// Basic registration of events

    /// </summary />

    /// 

    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.

    /// <summary />

    /// After completing page load, call the event handler on page to perform

    /// operations on uploaded file

    /// </summary />

    /// 

    /// 

    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 !!!

You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
GeneralGmail like file upload Pin
Shyam S
23:00 23 Jun '09  
Generalwhen I am working in MasterPage its not wrking Pin
Member 4209770
21:33 12 Apr '09  
AnswerHow can I work with this file upload control and .net validation controls? Pin
kaivanshah
20:38 19 Jan '09  
Generalcomplements Pin
Member 3767348
3:27 20 Oct '08  
GeneralNice article, but... Pin
dennieku
0:15 10 Oct '08  
GeneralRe: Nice article, but... Pin
dennieku
0:16 10 Oct '08  
GeneralThe uploaded file location Pin
arnonzamir
15:30 3 Sep '08  
GeneralRe: The uploaded file location Pin
ctembe
1:18 11 Oct '08  
QuestionProblem with postback Pin
Member 359517
8:45 29 May '08  
AnswerRe: Problem with postback Pin
Shyam S
19:18 29 May '08  
GeneralRe: Problem with postback Pin
Member 4209770
4:10 13 Apr '09  
GeneralDynamically use file upload control Pin
shahgun
0:06 28 Jun '07  
GeneralDOTNET 2 Pin
RichardOfMercator
1:59 31 May '07  
GeneralMissing the FileUploadControlTest Project Pin
clivenyong
0:22 12 Apr '07  
GeneralDon't work with UpdatePanel Pin
dkc_project
23:08 5 Mar '07  
GeneralRe: Don't work with UpdatePanel Pin
shyamproxy
23:48 5 Mar '07  
GeneralRe: Don't work with UpdatePanel Pin
yaniar
16:09 28 Mar '07  
GeneralNice article....Thanks to shyamproxy Pin
Najeed
20:30 5 Mar '07  


Last Updated 4 Mar 2007 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2009