Currently, I am utilizing MVC3 and have a form containing a file upload feature. My goal is to prompt the user for confirmation if the uploaded file already exists on the server. To achieve this, I have implemented a jQuery method within the form submit function based on my research findings. However, it appears that the post request is initiated before the confirm dialog can be displayed.
Upon calling e.preventDefault() at the beginning of the form submit function, the form submission halts, but I am uncertain as to how to resume the action. Below is my existing code:
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>
Hence, my query revolves around identifying where I might be going wrong. Additionally, is there a way to prevent the confirmation message from popping up if any client-side validation errors are detected?
Any assistance or guidance on this matter would be highly appreciated!
UPDATE I made the following adjustments which successfully addressed my initial objective:
<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>