This repository has been archived by the owner. It is now read-only.

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

Open
mpawelski opened this Issue Oct 23, 2018 · 0 comments

Comments

Projects
None yet
1 participant
@mpawelski
Copy link

mpawelski commented Oct 23, 2018

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)
    image
    And when you close dialog, you got loader that's still visible
    image

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
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.