how to trigger event click at input type="file" by function in angular 2?

Question

I have this code in Html file .

<input #fileInput type="file"  />

demo.ts

import {
  Component,
  Inject,
  OnInit,
  ElementRef,
  Renderer,
  ViewQuery
} from '@angular/core';
@Component({
  selector: 'demo',
  templateUrl: 'client/dev/demo/demo.html',
})
export class DemoComponent implements OnInit{

@ViewQuery('fileInput') fileInput:ElementRef;

constructor(){}

triggerFile(){
   // do something 
   // trigger input type="file" here
   this.fileInput.nativeElement.click();
}

ngOnInit() {


}

}

I see this answer : how to trigger click event of input file from button click in angular 2? Of course it worked . But I want to trigger input type="file" in triggerFile() function and I use ViewQuery and nativeElement.click() function . but it console this error "Cannot read property 'nativeElement' of undefined" . I use angular2 Rc 1 . thank for help .

Thierry Templier · Accepted Answer · 2016-07-08 08:16:06Z

10

Pass the fileInput reference to triggerFile() and do the fileInput.click() there instead:

<input #fileInput type="file"  />
<button type="button" (click)="triggerFile(fileInput)">trigger</button>

triggerFile(fileInput:Element) {
  // do something
  fileInput.click();
}

edited Jul 8, 2016 at 8:16

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

answered Jul 8, 2016 at 8:10

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Trần Dương Over a year ago

Can I ask you one more question ? how can I trigger event click by function in my ts file ( not by click on button )?

Günter Zöchbauer Over a year ago

You can add @ViewQuery('fileInput) fileInput:ElementRef; to your component class, then you don't need to pass it from the view. Invoke the click using this.fileInput.nativeElement.click();

Günter Zöchbauer Over a year ago

It doesn't contain the @ViewQuery(...

Günter Zöchbauer Over a year ago

Sorry, it's after ngAfterViewInit() for @ViewChild. I missed that you had it in ngOnInit(), that is still too early.

Günter Zöchbauer Over a year ago

Call triggerFile() in ngAfterViewInit() not in ngOnInit()

|

Daniel Delgado · Accepted Answer · 2017-10-17 20:41:54Z

6

No need to write code in controller

<input #fileInput type="file"  />
<button type="button" (click)="fileInput.click()">trigger</button>

answered Oct 17, 2017 at 20:41

Daniel Delgado

5,4036 gold badges42 silver badges54 bronze badges

Collectives™ on Stack Overflow

how to trigger event click at input type="file" by function in angular 2?

2 Answers 2

15 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

15 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related