Click here to Skip to main content
12,396,047 members (65,621 online)
Click here to Skip to main content

Stats

34.7K views
835 downloads
42 bookmarked
Posted

ASP.NET File Uploader with Overwrite Message

, 3 Dec 2008 CPOL
Intranet file upload dialog box with overwrite prompt and file archiving.
archive
bin
FileUploader.dll
Images
ajaxloader.gif
blank.gif
btnBrowse.jpg
btnBrowseDisabled.JPG
btnCancel.jpg
btnCancelDisabled.jpg
btnCancelMouseOver.jpg
btnClose.jpg
btnCloseDisabled.jpg
btnCloseMouseOver.jpg
btnOverwrite.jpg
btnOverwriteDisabled.jpg
btnOverwriteMouseOver.jpg
btnReplace.jpg
btnReplaceDisabled.jpg
btnReplaceMouseOver.jpg
btnSave.jpg
btnSaveDisabled.jpg
btnSaveMouseOver.jpg
icon_caution.gif
My Project
Application.myapp
pending
FileUploader.vbproj.user
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="FileUploader.aspx.vb" Inherits="FileUploader._Default" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Upload File</title>
    
    <style type="text/css">@import url(FileUploader.css);</style>
    <base target="_self" />
   
  
  <script type="text/javascript">
<!--

    function closeWindowIE() {
        //close IE window and return modal value
        var objHiddenFileName=document.getElementById("hReturnFileName");
        if (objHiddenFileName != undefined) {
            window.returnValue=objHiddenFileName.value;
        }
         window.close();
    }
 
     function closeWindowNonIE() {
        //close non IE window 
        //alert("close non-IE browser");
        var sHiddenFileName=document.frmUploadFile.hReturnFileName.value;
        var sHiddenReturnForm=document.frmUploadFile.hReturnForm.value;
        var sHiddenReturnField=document.frmUploadFile.hReturnField.value;
        window.opener.update_field(sHiddenFileName, sHiddenReturnForm, sHiddenReturnField);
        window.close();
    }
       
    function cancelWindow() {
     //window.returnValue = 'cancel';
     window.close();
    }
    
    function AjaxAlert(msgtext) {
        //called from code behind
        alert(msgtext);
    }
    function FileBrowseChangeMessage() {
        //change message after browse and set buttons
        var strFileName=document.frmUploadFile.uploadFile.value;
        var objCtl=document.getElementById("lblUploadMessage");
        var objSaveButton=document.getElementById("btnSave");
        objCtl.innerText="Click Save to upload file.";
        if ( strFileName.length > 1 ) {
             //set overwrite message if option set to 'message'
            // 'message' overwrite option selected [default]
            var sOverwrite=document.frmUploadFile.hOverwrite.value;
            if (sOverwrite == "message") {
                var sDestFilePathName=GetDestFileName();
                PageMethods.CheckFileExists(sDestFilePathName,FileExistsCallBackMessage);
            }
            EnableSaveButton();      
        }else{
            objCtl.innerText = "Click Browse to select a file to upload.";
            objSaveButton.disabled=true; 
            objSaveButton.src="Images/btnSaveDisabled.jpg";
            objSaveButton.style.cursor='default';
        }
    }
    
    function CheckFileExists(){
        //use PageMethods to call code behind routine
        var sOverwrite = document.frmUploadFile.hOverwrite.value;
        var sDestFolder=document.frmUploadFile.hDestFolderPath.value;
        var sUploadFile=document.getElementById('uploadFile').value;
        var sDestFilePathName=GetDestFileName();        
        if (sOverwrite == "none" || sOverwrite == "" || sOverwrite == "message") {
            //no overwrite message - just check if file exists and postback
            PageMethods.CheckFileExists(sDestFilePathName,FileExistsCallBackNoMessage);
            return false;
        }
        //prompt user with confirmation that file exists
        document.getElementById("hFileExists").value="false";
        if(sDestFilePathName.length == 0) {return false}
        if (sOverwrite == "popup") {
            //show confirm box and post back        
            PageMethods.CheckFileExists(sDestFilePathName,FileExistsCallBack);
        }
        return false;
    }

    function FileExistsCallBack(result){
        //if file exists on server, confirm with user
        if(result) {
            //file exists so prompt user
            if(confirm("File already exists. Do you want to overwrite?")) {
                document.getElementById("hFileExists").value="true";
                 __doPostBack('btnSave','');
            }
        }
        else
            //file doesn't exists on server.. So upload it
            __doPostBack('btnSave',''); 
    }

    function FileExistsCallBackNoMessage(result){
        //if file exists on server, no confirmation message
        if(result) {
            document.getElementById("hFileExists").value="true";
        }
            __doPostBack('btnSave',''); 
    }
     
    function FileExistsCallBackMessage(result){
        //callback from FileBrowseChangeMessage
        //if file exists on server, display overwrite button only
        if(result) {
            var objUploadLabelMessage=document.getElementById("lblUploadMessage");
            var objSaveButton=document.getElementById("btnSave");
            document.getElementById("hFileExists").value="true";
            EnableSaveButton();
            //change save button text to overwrite and messge to overwrite values 
            objSaveButton.src="Images/btnOverwrite.jpg";
            //hide cancel button and show overwrite button so code behind routine is used
            var objButtonCancel=document.getElementById("btnCancel");
            objButtonCancel.src="Images/blank.gif";
            var objButtonCancelOverwrite=document.getElementById("btnCancelOverwrite");
            objButtonCancelOverwrite.src="Images/btnCancel.jpg";
            objUploadLabelMessage.style.forecolor="orangered";
            objUploadLabelMessage.innerText="Caution!  Destination File exists. Click Overwrite to replace or Cancel.";         
            document.frmUploadFile.imgBeforeMessage.disabled=false;
            document.frmUploadFile.imgBeforeMessage.src="Images/icon_caution.gif";
        }
    }
    
    function GetDestFileName(){
        var sDestFolder = document.frmUploadFile.hDestFolderPath.value;
        var sUploadFile = document.getElementById('uploadFile').value;
        var sDestFilePathName = sDestFolder + "\\" + FileNameFromPath(sUploadFile);
        return sDestFilePathName;
    }
     
    function EnableSaveButton() {
        var objMessageLabelCtl = document.getElementById("lblUploadMessage");
        var objSaveButton = document.getElementById("btnSave");    
        objMessageLabelCtl.innerText="Click Save to upload file.";
        objSaveButton.disabled=false;
        objSaveButton.src="Images/btnSave.jpg";
        objSaveButton.style.cursor='hand';
    }
     
    function FileNameFromPath(sFilePathName) {
        return sFilePathName.substring(sFilePathName.lastIndexOf('\\') + 1);
    }

// -->
</script>

    
</head>
<body>


    <form id="frmUploadFile" runat="server">
    <input type="hidden" ID="hFileExists" runat="server" />
    <input type="hidden" ID="hDestFolderPath" runat="server" />
    <input type="hidden" ID="hReturnFileName" runat="server" />
    <input type="hidden" ID="hReturnForm" runat="server" />
    <input type="hidden" ID="hReturnField" runat="server" />
    <input type="hidden" ID="hOverwrite" runat="server" />

    <asp:ScriptManager 
        ID="ScriptManager1" 
        EnablePageMethods="true"
        runat="server" />

    <div>
        <asp:Panel 
            ID="panFileUpload"
            HorizontalAlign="Center"
            BackColor="#e6f3ff" 
            visible="true" 
            runat="server" > 
                     
        <asp:UpdatePanel 
            ID="UpdatePanel1" 
            UpdateMode="conditional" 
            runat="server">
         <Triggers>
            <asp:PostBackTrigger ControlID="btnSave" />
         </Triggers>
        <ContentTemplate> 
        
        <asp:Label
            id="lblFile"
            Text="Upload folder:"
            Font-Size="Larger"
            ForeColor="Blue"
            Runat="server" />
            
        <asp:Label
            id="lblFolder"
            Text="downloads"
            Font-Size="Larger"
            ForeColor="Blue"
            Runat="server" />
        <br /><br />
        
        <asp:FileUpload
            ID="uploadFile"
            Width="580px" 
            runat="server" />
        <asp:TextBox
            id="txtUploadedFile"
            Width="500px"
            Text=""
            Visible="false"
            Enabled="false" 
            Runat="server" />
        <asp:Image
            ID="imgButtonBrowse"
            ImageUrl="~/Images/btnBrowseDisabled.JPG"
            ImageAlign="AbsMiddle"
            Visible="false"
            Runat="server" />  
        <br />

        <p >
        <asp:Image ID="imgBeforeButtons" 
            ImageUrl="~/Images/blank.gif" 
            runat="server" />
        
        &nbsp;&nbsp;
        <asp:ImageButton
            ID="btnSave"
            ImageUrl="~/Images/btnSaveDisabled.jpg"
            CausesValidation="true"
            OnClientClick="return CheckFileExists()"
            OnClick="btnSave_Click"
            Runat="server" />
                                
        &nbsp;&nbsp;
        <asp:ImageButton
            ID="btnClose"
            ImageUrl="~/Images/btnCloseDisabled.jpg"
            OnClientClick="closeWindowIE();"
            Enabled="true"
            Runat="server" />
        &nbsp;&nbsp;
        
        <asp:ImageButton
            ID="btnCancel"
            ImageUrl="~/Images/btnCancel.jpg"
            OnClientClick="cancelWindow();"
            Runat="server" />
       <asp:ImageButton
            ID="btnCancelOverwrite"
            ImageUrl="~/Images/blank.gif"
            OnClick="btnCancelOverwrite_Click"
            Runat="server" />
        </p>
        <div >
        <asp:Image ID="imgBeforeMessage" 
            ImageUrl="~/Images/blank.gif"
            Visible="true"  
            runat="server" />
        <asp:Label
            id="lblUploadMessage"
            Font-Size="Larger"
            Text="Click Browse to select a file to upload."
            Runat="server" />
        <br /> 
        </div>
        </ContentTemplate>
        </asp:UpdatePanel>
        <br /> 
       &nbsp;&nbsp; &nbsp;&nbsp;
        </asp:Panel>     
       

    </div>
    </form>
    
    
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

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

Share

About the Author

BrianLaF
Web Developer
United States United States
Started programming in Business Basic in the 1980's and acquired my AS in Computer Science at that time. Promoted to IS Manager after one year of programming (sink or swim).
Self taught in SMC Basic, Visual Basic, C Shell, perl, ASP, JavaScript, vb.net, asp.net.
Now working as a Network Administrator at a hospital in Northern California.
Fell into a webmaster role when implementing the company's intranet website to support documentation.

You may also be interested in...

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160721.1 | Last Updated 4 Dec 2008
Article Copyright 2008 by BrianLaF
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid