Why triggering and simulation of file uploader button clicking from typescript code in html doesn't work? #1066

New Issue

2018-12-09T12:11:53Z

wahtdbogh commented

2018-12-09 12:11:53 +00:00

(Migrated from github.com)

I have a button component in my navbar.component.html as shown below. I would like to simulate and trigger clicking in button Upload from navbar.component.ts file. When I click Upload button it automatically opens file selector for instance on my mac it is finder.
Then I select the file and it is uploaded to the backend. I want to achieve the same action but using typescript code. So I just want to simulate as the user would click Upload button what will cause opening file selector and then all other activities will be the same as he would click button. Any ideas why it is not working? I did everything as was shown here.

In navbar.component.ts:

      event.preventDefault();
      let element: HTMLElement = document.getElementById('trigger') as HTMLElement;
      element.click()

I tried also:

  @ViewChild('myTrigger') myTrigger: ElementRef;

this.myTrigger.nativeElement.click();
              let el: HTMLElement = this.myTrigger.nativeElement as HTMLElement;
              el.click();

uploadFile():

uploadFile(){

    this.UploaderService.uploader = new FileUploader({url: URL + localStorage.getItem('current_path') + '/', autoUpload: true , itemAlias: 'file', authToken: 'token ' + localStorage.getItem('userToken')});



    this.UploaderService.uploader.onCompleteItem = (item:any, response:any , status:any, headers:any) => {

            this.UploaderService.displayAllFiles();
            this.ExecuteWhenSidebarClose();
        }

                this.UploaderService.uploader.onBeforeUploadItem = (item) => {
        item.withCredentials = false;
}


this.UploaderService.uploader.onAfterAddingFile = (item) => {
  // item.method = "PUT";
  item.withCredentials = false;
}

}

In navbar.component.html:

<li class='nav-item sidebar-false-upload' *ngIf="isCloud() && !sidebarVisible">
  <label #myTrigger id="trigger" (click)="this.uploadFile()" data-toggle="collapse" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation"
    class="pretty-file nav-link">
    <i class="nc-icon nc-cloud"></i>Upload

    <div id="fileSelector">
      <input type="file" name="fileUplaod" id="fileUpload" multiple ng2FileSelect [uploader]="this.UploaderService.uploader">
    </div>
  </label>
</li>

I have a button component in my `navbar.component.html` as shown below. I would like to simulate and trigger clicking in button `Upload` from `navbar.component.ts file`. When I click `Upload` button it automatically opens file selector for instance on my mac it is finder. Then I select the file and it is uploaded to the backend. I want to achieve the same action but using typescript code. So I just want to simulate as the user would click Upload button what will cause opening file selector and then all other activities will be the same as he would click button. Any ideas why it is not working? I did everything as was shown [here][1]. In navbar.component.ts: event.preventDefault(); let element: HTMLElement = document.getElementById('trigger') as HTMLElement; element.click() I tried also: @ViewChild('myTrigger') myTrigger: ElementRef; this.myTrigger.nativeElement.click(); let el: HTMLElement = this.myTrigger.nativeElement as HTMLElement; el.click(); uploadFile(): uploadFile(){ this.UploaderService.uploader = new FileUploader({url: URL + localStorage.getItem('current_path') + '/', autoUpload: true , itemAlias: 'file', authToken: 'token ' + localStorage.getItem('userToken')}); this.UploaderService.uploader.onCompleteItem = (item:any, response:any , status:any, headers:any) => { this.UploaderService.displayAllFiles(); this.ExecuteWhenSidebarClose(); } this.UploaderService.uploader.onBeforeUploadItem = (item) => { item.withCredentials = false; } this.UploaderService.uploader.onAfterAddingFile = (item) => { // item.method = "PUT"; item.withCredentials = false; } } In navbar.component.html: <li class='nav-item sidebar-false-upload' *ngIf="isCloud() && !sidebarVisible"> <label #myTrigger id="trigger" (click)="this.uploadFile()" data-toggle="collapse" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation" class="pretty-file nav-link"> <i class="nc-icon nc-cloud"></i>Upload <div id="fileSelector"> <input type="file" name="fileUplaod" id="fileUpload" multiple ng2FileSelect [uploader]="this.UploaderService.uploader"> </div> </label> </li> [1]: https://dev.to/gloriamaris/how-to-programmatically-trigger-click-event-in-angular-4--3i6a

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#1066