I have an AjaxFileUpload control, and I am already using jquery to popup an error for the wrong file type. The AjaxFileUpload, however, apparently has a default, not-so-pretty alert that comes up when an incorrect file type is added. This results in the default alert showing, then my modal showing. I cannot remove the AllowedFileTypes property because when I do the unwanted file gets added anyway. Does anyone know how to get rid of the default alert that the AjaxFileUpload throws?
<div class="upload-photos-add" id="Q0012_00" runat="server">
<asp:AjaxFileUpload EnableViewState="false" ID="AjaxFileUpload2"
ContextKeys="0012.00" runat="server" AllowedFileTypes="jpg,jpeg,png"
OnUploadComplete="AjaxFileUpload_UploadComplete"
OnClientUploadComplete="onClientUploadComplete"
OnClientUploadCompleteAll="onClientUploadCompleteAll"
OnClientUploadStart="onClientUploadStart">
</asp:AjaxFileUpload>
</div>
The function that handles validation:
function validateFileSize(input_event) {
//var valid_file = true;
var valid_format = true;
var valid_size = true;
var element_id = $(input_event).attr('id');
if(supports_html5_file_upload) {
var number_of_new_files = document.getElementById(element_id).files.length;
for (var i = 0; i < number_of_new_files; i++) {
var current_file = document.getElementById(element_id).files[i];
var file_name = current_file.name;
var file_path_array = file_name.split('.');
var file_ext = file_path_array[file_path_array.length - 1];
file_ext = file_ext.toLowerCase();
if(file_ext != 'jpg' && file_ext != 'jpeg' && file_ext != 'png') {
//valid_file = false;
valid_format = false;
}
if(ie7 || ie8 || ie9) {
var sizeinbytes = 100;
} else {
var sizeinbytes = current_file.size;
}
var fSizeMb = sizeinbytes / 1048576;
if(fSizeMb > 3) {
//valid_file = false;
valid_size = false;
}
}
} else {
var current_file = document.getElementById(element_id);
var file_name = current_file.value;
var file_path_array = file_name.split('.');
var file_ext = file_path_array[file_path_array.length - 1];
file_ext = file_ext.toLowerCase();
if(file_ext != 'jpg' && file_ext != 'jpeg' && file_ext != 'png') {
//valid_file = false;
valid_format = false;
}
if(fileApiSupported) {
//var sizeinbytes = current_file.size;
var sizeinbytes = document.getElementById(element_id).files[0].size;
} else {
var sizeinbytes = 100;
}
var fSizeMb = sizeinbytes / 1048576;
if(fSizeMb > 3) {
//valid_file = false;
valid_size = false;
}
}
if (!valid_size && !valid_format) {
$("#modal-file-size-format").modal('show');
document.getElementById(element_id).value = null;
}
else if (!valid_format) {
$("#modal-file-format").modal('show');
document.getElementById(element_id).value = null;
}
else if (!valid_size) {
$("#modal-file-size").modal('show');
document.getElementById(element_id).value = null;
}
else {
if(canvasSupported && fileApiSupported) {
thumbnail_preview.update(document.getElementById(element_id).files, input_event);
} else {
thumbnail_title_preview.update(document.getElementById(element_id).value, input_event);
}
}
}
This alert is a functionality that is built into the AjaxControlToolkit. In order to get rid of it, I downloaded the AjaxControlToolkit source code and changed the alert to a console log, then I recreated the AjaxControlToolkit.dll and replaced it in my project.
confirmFileIsInvalid: function (fileItem) {
/// <summary>
/// Send alert to user that file type is not acceptable. Processor uses
/// this method after validation.
/// </summary>
/// <param name="fileItem"></param>
var utils = new Sys.Extended.UI.AjaxFileUpload.Utils();
console.log(String.format(Sys.Extended.UI.Resources.AjaxFileUpload_WrongFileType,
utils.getFileName(fileItem.value), fileItem.type));
}
This was the alert that was coming up:
<data name="AjaxFileUpload_WrongFileType" xml:space="preserve">
<value>
Can't add file '{0}' to upload list. File with type '{1}' is not allowed
</value>
</data>