Confirm Box for File Replace using Client Callback

Introduction

You are providing a facility for uploading files to your webserver. Client can upload any file. Client doesn't know whether the file he is uploading is already present on the webserver or not. So you need to check and ask to replace an existing file.

Once a file is chosen by the user, we need to check whether the file exists on the webserver or not.

A full postback for this will make the file lost from FileUpload control. As the page and its controls are re-created, the page code runs on the server, and a new version of the page is rendered to the browser.

A full postback will be done only to save the file.

Background

To avoid losing client state and not incur the processing overhead of a server roundtrip, you can code an ASP.NET Web page so that it can perform client callbacks. In a client callback, a client-script function sends a request to an ASP.NET Web page. The Web page runs a modified version of its normal life cycle. The page is initiated and its controls and other members are created, and then a specially marked method is invoked. The method performs the processing that you have coded and then returns a value to the browser that can be read by another client script function. Throughout this process, the page is live in the browser.

Using the Code

<asp:FileUpload ID="FileUpload1" runat="server" />       
<input type="button" id="hBtn" value="Save" onclick="CheckFile()" />
        
<asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />
<asp:HiddenField ID="hdnIsOverwrite" runat="server" />

public partial class _Default : System.Web.UI.Page, 
			System.Web.UI.ICallbackEventHandler
{
    protected bool returnValue;
    protected void Page_Load(object sender, EventArgs e)
    {
        // hide server side button
        btnSave.Style.Add(HtmlTextWriterStyle.Display, "none");
        String cbReference =
            Page.ClientScript.GetCallbackEventReference(this,
            "arg", "ReceiveServerData", "context","processError",false);
        String callbackScript;
        callbackScript = "function CallServer(arg, context)" +
            "{ " + cbReference + ";}";
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
            "CallServer", callbackScript, true);
    }
    protected void btnSave_Click(object sender, EventArgs e)
    {
        FileUpload1.PostedFile.SaveAs(Server.MapPath
		(Path.GetFileName(FileUpload1.PostedFile.FileName)));
    }
    public void RaiseCallbackEvent(String eventArgument)
    {
        //dummy processing
        System.Threading.Thread.Sleep(5000);   
        //set return value
        returnValue = File.Exists(Server.MapPath(Path.GetFileName(eventArgument)));
    }
    public String GetCallbackResult()
    {
        return returnValue.ToString().ToLower();
    }
}

     <script language="javascript" type="text/javascript">    
    function CheckFile()
    {
        var fu= document.getElementById("FileUpload1");
        var btn = document.getElementById("hBtn");
        if(fu.value=='')
        {
            alert('Please select a file.');            
            fu.focus();
        }
        else
        {
            //fire request to server
            CallServer(fu.value,"filename");
            btn.disabled=true;
        }        
    }    
    
    function ReceiveServerData(rValue)
    {   
        var fu= document.getElementById("FileUpload1");
        var btnServer = document.getElementById("btnSave");
        var btn = document.getElementById("hBtn");
   
        //disable the button for further clicking
        btn.disabled=false;
        
        if(rValue=='true') // file exists
        {
            if(confirm('Are you sure you want to replace the file ?'))
            {      
                document.getElementById("hdnIsOverwrite").value="true";
                //save file , you can also use __doPostback()             
                btnServer.click();
            }            
        }
        else
        {
            document.getElementById("hdnIsOverwrite").value="false";
            //save file , you can also use __doPostback()             
            btnServer.click();
        }
    }
    function processError(rValue)
    {
        alert(rValue);
    }
    </script>

Points of Interest

• A good use of ClientCallback

History

• 25^th May, 2009: Initial post