File selection dialog keeps showing up repeatedly in Microsoft Edge / Win 10 about ngx-uploader

[2J]

bug still exists in edge version.

Can be fixed by putting ngFileSelect outside of and using the for attribute on label to relate it to the input.

example:

<label for="fileSelectId">
    <!--Other contents here-->
</label>
<input id="fileSelectId" ngFileSelect type="file" class="hidden" />

[jkuri]

Is this issue still present? Can you please check the new version on Edge and let me know? Thanks.

[mwijnands]

This issue is still present. Just use your demo page with the Edge browser.

[jkuri]

Unfortunatelly I don't have access to any Windows machine at the moment but when I got a chance I'll try to resolve this.

[aghaasif]

I was able to resolve this problem in the earlier version of your component, but didn't have the time to submit a pull request. Sorry for that.

The problem, as far as i can remember, happens because you've used a label element in your example html to capture user's clicks. The label element bubbles up the click event to the container div element, which in case of Edge raises the click event of the contained elements (including the label element) back again. The label then bubbles up the event again, and so the cycle goes on forever.

Conclusion: If you remove the label, and design your file upload UI using div only, it solves the problem. Here is the final html i ended up with upon resolving the Edge browser issue (you'll have to adjust your css accordingly) :

<div class="file-upload upload-btn is-success" [ng-file-drop]="options" (onUpload)="handleMultipleUpload($event)">
          <img src="./css/img/files-sm.svg" style="margin-bottom:20px" />
          <br/> Click here or drag/drop you files in this box to upload
          <input type="file" multiple [ng-file-select]="options" (onUpload)="handleMultipleUpload($event)">
</div>
<div class="progress">
          <div class="progress-bar" [style.width]="multipleProgress + '%'"></div>
          <span class="percent"><span class="number">{{ multipleProgress }}</span> %</span>
</div>

Hope this helps!

[aghaasif]

Here is a stackoverflow thread that talks about a similar issue i guess:

http://stackoverflow.com/questions/17185265/jquery-click-event-triggers-twice-when-clicked-on-html-label

Label is the culprit. Don't catch me on my explanation above though if it turns out to be inaccurate as it's been some time since i troubleshoot this issue, but whatever explanation there may be, i surely remember that it was caused by the label! :)

[jkuri]

@aghaasif thanks a lot for you comment. Basically its not the problem with the component but with the directive assigned to html element.

[aghaasif]

@jkuri yes, the problem is not with your component, but it is related to your example. I'm sure most of the developers who'd use your component will copy paste the code from your examples, so i recommend you fix the bug in there before it ends up destroying planet earth :)

[jkuri]

Haha, thats funny ;) will do it.

[milenkovic]

Any news regarding this? Problem still exits in Edge.