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

javascript html typescript angular

12,752

Solution 1

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();
}

Solution 2

No need to write code in controller

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

12,752

Trần Dương

Updated on September 15, 2022

Comments

Trần Dương over 1 year
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 .
- adeneo almost 8 years
  
  You'll have to be a lot clearer, control what, triggered from where ?
Trần Dương almost 8 years

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 almost 8 years

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();
Trần Dương almost 8 years

I use angular 2 Rc 1 . It console this error :"Cannot read property 'nativeElement' of undefined" . It cann't use nativeElement ?
Günter Zöchbauer almost 8 years

Did you remove #fileInput from the <input type="file">?
Trần Dương almost 8 years

No , I didn't . It's still <input #fileInput type="file" /> . I imported ViewQuery from @angular/core , Is It Problem ?
Günter Zöchbauer almost 8 years

I was missing the closing ' after 'fileInput. I guess you added it. Please edit your question and post your current code.
Trần Dương almost 8 years

I have edited my question and posted my code . thank you .
Günter Zöchbauer almost 8 years

It doesn't contain the @ViewQuery(...
Trần Dương almost 8 years

I edited my question clearer . I still used your code .
Günter Zöchbauer almost 8 years

You don't by any chance call triggerFile() from within the constructor()? @ViewChild() is only set after ngAfterContentInit().
Günter Zöchbauer almost 8 years

Sorry, it's after ngAfterViewInit() for @ViewChild. I missed that you had it in ngOnInit(), that is still too early.
Trần Dương almost 8 years

yes, my constructor don't has anything , I edited my code at ngOnInit , but it's still console that error . did i use @ViewChild() correctly ?
Günter Zöchbauer almost 8 years

See my previous comment ngAfterViewInit()
Trần Dương almost 8 years

sorry , I don't understand your solution :( .
Günter Zöchbauer almost 8 years

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