Get file name from Angular2 input type file

Question

I want to get the file name from my html input tag in modal form and save it using Angular2. Can anybody help me?

Answer 1

You can do the following:

HTML:

<input type="file" (change)="fileEvent($event)" /> 

TypeScript:

 fileEvent(fileInput: Event){ let file = fileInput.target.files[0]; let fileName = file.name; } 

Answer 2

You can try a more elegant option:

HTML:

 <input #file type="file" (change)="updateFile(file)"> 

Script:

 updateFile(file: HTMLInputElement) { let name = file.value; } 

Answer 3

 <button (click)="imgFileInput.click()">Add</button> {{ imgFileInput?.files[0]?.name }} <input hidden type="file" #imgFileInput (change)="uploadSingle($event)"/> 

Answer 4

HTML

 <input type="file" (change)="onFileChange($event)"> 

Script

 onFileChange(event) { let files = event.target.files[0].name; } 

Answer 5

This work shapes me:

HTML

 <input type="file" (change)="detectFiles($event)"> <div class="output">Seleccionado: {{ fileName }} </div> 

TS

 selectedFiles: FileList; fileName: string; detectFiles(event) { this.selectedFiles = event.target.files; this.fileName = this.selectedFiles[0].name; console.log('selectedFiles: ' + this.fileName ); } 

Answer 6

This solution fooobar.com/questions/458398 / ... proposed by @ Selçuk Cihan did not help therefore my workaround was to make a parameter of type fileInput "any" by doing this

 fileEvent(fileInput){ let file = fileInput.target.files[0]; let fileName = file.name; } 

so at run time TS is pure JS code

Anyway, thanks for that, and it saved me a lot of time.