Question

I using MVC3 and I have a form with a file upload. If the file already exists on the server, I want to prompt the user to confirm that they want to overwrite the file. I have added a jQuery method on the form submit to handle this from what I’ve read online, but it seems like the post is being intialized before it can display the confirm dialog..

If I call e.preventDefault() at the top of my form submit function it stops the form, but then I don’t know how to reinvoke the action. Here is what I have:

The Form

@using (Html.BeginForm("Upload", "Management", FormMethod.Post, new {id = "formUpload", enctype = "multipart/form-data"})) {

    <div class="editor-label">Pricing Model Workbook</div>
    <div class="editor-field">
        <input type="file" name="file" id="file" size="50" />
        @Html.ValidationMessageFor(file => file.FileName)
    </div>
    <div><input type="submit" name="upload" id="upload" value="Upload" /></div>
}

The jQuery

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('#formUpload').submit(function (e) {
            var filePath = $('#file').val();
            $.getJSON('@Url.Action("CheckIfFileExists")', { path: filePath },
                function (exists) {
                    if (exists) {
                        var cancel = confirm('File "' + filePath + '" has already been uploaded. Overwrite?');
                        if (cancel) {
                            e.preventDefault();
                            return false;
                        }
                    }

                    return true;
                }
            );
        });
    });
</script>

So my question is, what am I doing wrong? Also, as a bonus, is there any way to prevent this from popping up if the clientside validation catches an error?

Any help would be greatly appreciated!!!

UPDATE
I ended up doing this and this works for what I was trying to do.

    <script type="text/javascript" language="javascript">
    $(document).ready(function () {
        var fileInvalid = false;

        // check if file exists when user selects a new file
        $('#file').change(function () {
            var filePath = $('#file').val();
            $.getJSON('@Url.Action("CheckIfFileExists")', { path: filePath },
                function (exists) {
                    if (exists) {
                        var overwrite = confirm('Warning :: File "' + filePath + '" has already been uploaded.'
                                                + 'The existing data will be overwritten on submission. Continue?');
                        if (!overwrite) {
                            $('#file').replaceWith($('#file').clone(true));
                        }
                    }
                }
            );
        });
    });
</script>

Answer 1

The problem is that your Ajax request doesnt potentially complete until after the submit handler is finished; ergo, the post continues and you lose the ability to cancel it. It sounds like what you need is a gate; basically, until you set the flag as allowable, you can’t submit. Something like so:

 var fileInvalid = true;
 $('#file').change(function()
 {
     $.getJSON('@Url.Action("CheckIfFileExists")', { path: filePath },
            function (exists) {
                if (exists) {
                    var cancel = confirm('File "' + filePath + '" has already been uploaded. Overwrite?');
                    if (cancel) {
                        fileInvalid = false;
                    }
                }
                else
                {
                    fileInvalid = false;
                }
            }
        );
 });

 $('#formUpload').submit(function(e)
 {
     if(fileInvalid)
        e.preventDefault();
 });