ASP.NET and C# FileUpload

Question

I have a asp file upload for pictures and what I want to do is, when the file chosen has the same name as the previous file it should pop something up that says "This image name already exists, do you want to replace it? if yes then it would just override the current picture with the new one but if not then just leave it alone. How can I do this?. Right now I have this. Also if the solution is in javascript I could also use that (but i am not too good with javascript:) ) Thank you

<div class="style">
Choose an Image:&nbsp;<asp:FileUpload ID="getImage" runat="server" Width="150px" BorderStyle="Inset" EnableViewState="true" />
 <asp:RegularExpressionValidator ID="RegularExpressionValidator"
runat="server" ControlToValidate="getImage" CssClass="Error" Display="dynamic" ValidationExpression=".*(\.[Jj][Pp][Gg]|\.[Gg][Ii][Ff]|\.[Jj][Pp][Ee][Gg]|\.[Pp][Nn][Gg])" ErrorMessage="Select a correct file format"></asp:RegularExpressionValidator>
</div>

Please be aware I am a total newbie with Javascript so if that is what's going to work please explain as if I was a 5 year old.

I really appreciate the help.

Answer 1

Add the code below to your submit button

OnClientClick="return confirm('Are you sure you want to delete this file?')"

Edit as someone pointed out this will ask this question without taking in concern previous file and new one. It will do basic job.

My question is whether you doing this for edit mode or in new item mode. I mean are you editing item or adding new one on page you are interested to check?

Answer 2

My solution will perform the check just before postback. I also use jquery a little bit.

The important piece of the puzzle here is retrieving the previous file name. I created a PageMethod to do this part. So in my aspx.cs file I have a function that looks like this:

using System.Web.Services;

.......

[WebMethod()]
public static string GetPreviousFileName()
{
    //put logic here to get the filename to compare against.
    return "somefilename.ext";
}

You'll need to implement your own logic for how to retrieve the file name. Another, simpler but less flexible, approach for handling the previous file name would be to add an asp:hiddenfield to your page and populate it with the name of the previous file on page load. Then you could compare by reading $('#<%= hiddenField.ClientID %>').val() .

Next I used the following code for my file upload control and a submit buton:

<asp:ScriptManager ID="sm" runat="server" EnablePageMethods="true" />
<div>
    <asp:FileUpload ID="fu" runat="server" />
    <asp:Button ID="btnUpload" runat="server" OnClientClick="return checkDuplicateFile();" Text="Upload File" />
</div>

Two important things to note here: The ScriptManager has EnablePageMethods="true" and the asp:button has an OnClientClick attribute specified. Lastly, the javascript part of the solution which retrieves the value from the page method and and compares the file names:

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var oFilename = "";

    $(function () {
        //get original file name on page load
        PageMethods.GetPreviousFileName(function (result) {
            oFilename = result;
        });
    });

    function checkDuplicateFile() {
        var newVal = $('#<%=fu.ClientID %>').val();
        var newValFile = newVal.substr(newVal.lastIndexOf("\\") + 1);

        //returning true causes postback, returning false stops postback.
        if (newValFile == oFilename) { return confirm("This image name already exists, do you want to replace it?"); }
        else return true;
    }
</script>

Couple of things going on here. We use our pagemethod to pull in our old filename from the page method on page load ( PageMethods.GetPreviousFileName ). Next we setup the function which will be called by our buttons onClick event (client side). The <%=fu.ClientID %> snippet of code will output the client side id of the file upload control for use in our javascript. I do a substring on the file path and extract the file name by pulling back only the text after the last '\' and do the compare.

As my comment in the function says, returning true/false from a function called in the OnClientclick event determines whether a post back occurs. So if the user clicks yes in the confirmation box then a postback occurs, else if they click no then none occurs.

Hope that at least gets you going in the right direction.