title: jQuery intercept and prevent form submission if file already exists
body: <p>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.. </p>
  
  <p>If I call <code>e.preventDefault()</code> 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:</p>
  
  <p><strong>The Form</strong></p>
  
  <pre><code>@using (Html.BeginForm("Upload", "Management", FormMethod.Post, new {id = "formUpload", enctype = "multipart/form-data"})) {
  
      &lt;div class="editor-label"&gt;Pricing Model Workbook&lt;/div&gt;
      &lt;div class="editor-field"&gt;
          &lt;input type="file" name="file" id="file" size="50" /&gt;
          @Html.ValidationMessageFor(file =&gt; file.FileName)
      &lt;/div&gt;
      &lt;div&gt;&lt;input type="submit" name="upload" id="upload" value="Upload" /&gt;&lt;/div&gt;
  }
  </code></pre>
  
  <p><strong>The jQuery</strong></p>
  
  <pre><code>&lt;script type="text/javascript" language="javascript"&gt;
      $(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;
                  }
              );
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p>Any help would be greatly appreciated!!! </p>
  
  <p><strong>UPDATE</strong>
  I ended up doing this and this works for what I was trying to do.</p>
  
  <pre><code>    &lt;script type="text/javascript" language="javascript"&gt;
      $(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));
                          }
                      }
                  }
              );
          });
      });
  &lt;/script&gt;
  </code></pre>