1

Lets say I have the following html..

<select name="certificatesSelect"
        ng-model="$ctrl.selectedCertificate"
        ng-change="$ctrl.onSelectCertificate()"
        ng-options="certificate as certificate.name for certificate in $ctrl.certificateDropdownOptions track by certificate.id">

<input id="certificate-upload-file-input"
       type="file"
       style="visibility: hidden"
       accept=".der,.crt"/>

One of my options that are populated by ng-options is a "Browse..." option. When the user selects the 'Browse...' option from the select box, I want to be able to pull up the file upload window provided by the browser, i.e the same action as if the user clicked on the file type input box.

My initial attempt at this was something as follows where on my controller I had the onSelectCertificate function bound to change event of the select box.

onSelectCertificate() {
            // if the selected option is the "Browse..." option
            if (this.selectedCertificate.id === this.BROWSE_OPTION_ID) {
                // find the input element and click on it
                this.certificateFileInput = this.$element.find("input[type='file']");
                this.$timeout(() => {
                    this.certificateFileInput.click();
                }, 0);
            }
        }

However, this does not work. After some reading online, I believe this is because of a security concern where only a USER issued click event can trigger another click event through javascript. Therefore, the ng-change binding for the select box can not trigger my own click event through javascript. Now, my question is, are there any other ways to achieve this select box design?

Aravind
  • 40,391
  • 16
  • 91
  • 110
skalidindi
  • 173
  • 1
  • 1
  • 9
  • Duplicate of http://stackoverflow.com/questions/8595389/programmatically-trigger-select-file-dialog-box?rq=1 – court3nay May 06 '17 at 00:37
  • 2
    Possible duplicate of [Programmatically trigger "select file" dialog box](http://stackoverflow.com/questions/8595389/programmatically-trigger-select-file-dialog-box) – court3nay May 06 '17 at 00:37
  • Both issues are similar but my use case is different as I do not deal with a button tag or an input with type button but rather a select tag where its onchange should trigger the input's click. Therefore, the use case is different. – skalidindi May 06 '17 at 00:43
  • 1
    So that's interesting... I'd say that chrome is buggy here : You should be able to do the same technique as in the proposed dupe in the select's `change` event, since the `change` event [should trigger an user activation](https://html.spec.whatwg.org/multipage/interaction.html#triggered-by-user-activation), but it [doesn't](https://jsfiddle.net/ngLbyv5a/)... (It works fine in FF though). – Kaiido May 06 '17 at 03:50
  • @Kaiido Nice find. I have only been testing on Chrome. – skalidindi May 06 '17 at 04:11
  • Submitted bug to Chrome. https://bugs.chromium.org/p/chromium/issues/detail?id=719515 – skalidindi May 12 '17 at 16:59

0 Answers0