Search code examples
javascriptjqueryasp.netajaxajaxcontroltoolkit

How do I remove the default Alert that comes up with invalid format on AjaxFileUpload?


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);
            }

        }

    }

Solution

  • 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>