Error when you use stopOnFirstInvalidFile: true option and native dialogs.

[mpawelski]

Hi, thanks for this great library! I found one issue when using stopOnFirstInvalidFile and <dialog> elements in Chrome.

Type of issue

• Bug report
• Feature request

Uploader type

• Traditional
• S3
• Azure

Exception when you use `stopOnFirstInvalidFile: true` option and native dialogs.

Fine Uploader version

5.16.2

Browsers where the bug is reproducible

Chrome

Operating systems where the bug is reproducible

Windows 10

Exact steps required to reproduce the issue

1. Use validation.stopOnFirstInvalidFile: true because you don't want to stop uploading files when you select a lot of files and some of them don't pass validation (because their extensions is not provided in validation.allowedExtensions list)
2. Use HTML 5.1 <dialog> element in template
3. Drag and drop two files with extensions that are not specified on validation.allowedExtensions list
4. Error in browser occurs, and uploader state is messed up (visible loader after you close dialog)
   
   And when you close dialog, you got loader that's still visible
   

Looks that we try to call showModal on already opened HTMLDialogElement and this is causing error. Quick fix is to just not use <dialog> element and use alert or some other custom popup. But since <dialog> are in default templates and normally just works out of the box on Chrome it would be nice to have it working in this case also.
I guess the best experience is to show second message after first one is close (to resemble behavior of alert calls) but simply showing first message and ignoring other would be ok too (at least there won;t be an error)

All relevant Fine Uploader-related code that you have written

Just parts of code, because I can;t share everything

const fineUploader = new qq.FineUploader({
    element: element,
    template: templateDomElement,
    // .
    // .
    // .
    validation: {
        stopOnFirstInvalidFile: false,
        allowedExtensions: [
            'jpg', 'jpeg', 'png'
        ]
    },
    // .
    // .
    // .
    //showMessage: message => {
    //    alert(message);
    //}
});

        <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
            <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
        </div>

.
.
.
        <dialog class="qq-alert-dialog-selector" style="margin-left:auto; margin-right:auto">
            <div class="qq-dialog-message-selector"></div>
            <div class="qq-dialog-buttons">
                <button type="button" class="qq-cancel-button-selector">@Html.GetResource("Close")</button>
            </div>
        </dialog>

Stack trace

templating.js:1042 Uncaught DOMException: Failed to execute 'showModal' on 'HTMLDialogElement': The element already has an 'open' attribute, and therefore cannot be opened modally.
    at qq.Templating.showDialog (http://localhost:54080/Scripts/libs/fine-uploader/fine-uploader.min.js:6:13421)
    at Object.showMessage (http://localhost:54080/Scripts/libs/fine-uploader/fine-uploader.min.js:5:31111)
    at qq.FineUploader._itemError (http://localhost:54080/Scripts/libs/fine-uploader/fine-uploader.min.js:5:28231)
    at qq.FineUploader._validateFileOrBlobData (http://localhost:54080/Scripts/libs/fine-uploader/fine-uploader.min.js:3:14787)
    at qq.FineUploader._onValidateCallbackSuccess (http://localhost:54080/Scripts/libs/fine-uploader/fine-uploader.min.js:3:11079)
    at Object.onSuccess (http://localhost:54080/Scripts/libs/fine-uploader/fine-uploader.min.js:2:8652)
    at qq.FineUploader._handleCheckedCallback (http://localhost:54080/Scripts/libs/fine-uploader/fine-uploader.min.js:3:1001)
    at http://localhost:54080/Scripts/libs/fine-uploader/fine-uploader.min.js:3:5899