Dropzone JS not passing validation in ie9

Question

We're currently trying to set up a form submit for file upload and details and it works great in modern browsers, unfortunately for ie9 the fallback is not passing through any of the dropzone validation. I'm not entirely sure if the functionality is meant to do this for the fallback and it should be pointing correctly but it's currently allowing anything to pass through on submit.

dropzone js

function fallback() {
    $(".dz-message").text('Your browser does not support drag n drop uploaded. Please use the file upload field below. On submitting, please be patient while we upload your file, this can take a few minutes.');
}

//Dropzone config
Dropzone.options.WADAInsertForm = {
    paramName: "regUploadLoc", 
    uploadMultiple: false,
    autoProcessQueue: false,
    maxFiles: 1,
    maxFilesize: 2.2, // MB
    previewsContainer: '.dropzonePrev',
    clickable:'#dropzoneArea',
    acceptedFiles: "application/zip,application/x-compressed,application/x-zip-compressed,application/pdf,image/jpeg,image/pjpeg",
    addRemoveLinks: true,
    dictDefaultMessage: "Drag'n'drop files here or click to upload your supporting documents",
    dictFileTooBig: "This file is too big ({{filesize}}). File should be 2mb or less.",
    forceFallback: true,
    fallback: function() {
        console.log("Fallback engaged");
        fallback();
    }, // end of fallback
    init: function() {
        console.log("init engaged");
        var myDropzone = this;
        this.element.querySelector("button[id=cmdSubmit]").addEventListener("click",function(e) {
            $("button#cmdSubmit").button('Submitting');
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
        });

        this.on('complete', function () {
            if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0 && validateForm() === true) {
                self.location="place.asp";
            }
            if (validateForm() === true) {
                var button = $("button#cmdSubmit");
            }
            if (button.text() === "Submit") {
                button.text("Submitting");
            } else {
                button.text("Submit");
            }
        });
    } //end of init
};//end Dropzone config

HTML

<div class="form-group">
           <label for="regUploadLoc">Supporting documents<span class="col-Orange">*</span></label>
            <p class="help-block">Please upload supporting documents that may be relevant to your submission. Supporting documents must be uploaded in one zipped file<br/>(i.e. a .zip file, and be no larger in file size than 2mb)</p>
              <div id="dropzoneArea">
               <div class="dz-default dz-message"><span>Drag'n'drop files here or click to upload your supporting documents</span></div>
                            <div class="dropzonePrev"></div>
                            <div class="fallback">
                                <input type="file" id="regUploadLoc" name="regUploadLoc">
                             </div>
                             </div>

Answer 1

This is intended. DropzoneJS

Browser Support

Chrome 7+

Firefox 4+

IE 10+

Opera 12+ (Version 12 for MacOS is disabled because their API is buggy)

Safari 6+

For all the other browsers, dropzone provides an oldschool file input fallback.

There is no workaround for drag’n’drop in older browsers – it simply isn’t supported. The same goes for image previews, etc… But using dropzone, your users using an old browser will be able to upload files. It just won’t look and feel great. But hey, that’s their fault.

The old school file input has no validation and the script for the Dropzone will not trigger because it isn't even using the functions for the ajax submits or anything. You are literally submitting the form. You need to have checks on the server side as well for extra security.