BrightspaceUILabs / file-uploader

Polymer-based web component for D2L file uploader
Apache License 2.0
4 stars 6 forks source link

File drop still active if control is not visible #48

Open zwilson2 opened 7 years ago

zwilson2 commented 7 years ago
<paper-tabs selected="{{selectedTab}}" attr-for-selected="name">
    <paper-tab name="tab1">Tab 1</paper-tab>
    <paper-tab name="tab2">Tab 2</paper-tab>
</paper-tabs>
<iron-pages id="pages" selected="[[selectedTab]]" attr-for-selected="name">
    <div name="tab1">
        <some-component></some-component>
    </div>
    <div name="tab2">
        <d2l-file-uploader on-d2l-file-uploader-files-added="_fileAdded"></d2l-file-uploader>
    </div>
</iron-pages>

While on tab1, you will not be able to see the d2l-file-uploader component but you can still drop a file on the page and it will be picked up by the file uploader.

This is also not fixed by a dom-if:

<paper-tabs selected="{{selectedTab}}" attr-for-selected="name">
    <paper-tab name="tab1">Tab 1</paper-tab>
    <paper-tab name="tab2">Tab 2</paper-tab>
</paper-tabs>
<iron-pages id="pages" selected="[[selectedTab]]" attr-for-selected="name">
    <div name="tab1">
        <some-component></some-component>
    </div>
    <div name="tab2">
        <template is="dom-if" if="[[selectedTab === 'tab2'">
            <d2l-file-uploader on-d2l-file-uploader-files-added="_fileAdded"></d2l-file-uploader>
        </template>
    </div>
</iron-pages>

In this case, as long as the user stays on "tab1" the d2l-file-uploader is never loaded and dropping a file will be handled by the browser. As soon as the user navigates to "tab2", it doesn't matter whether they go back to "tab1" or not, a file drop will trigger the d2l-file-uploader.