I want get the file name from my html input tag in a modal view and save it using Angular2. Can someone help me?
Add a comment
|
6 Answers
You can do next:
HTML:
<input type="file" (change)="fileEvent($event)" />
TypeScript:
fileEvent(fileInput: Event){
let file = fileInput.target.files[0];
let fileName = file.name;
}
4 Comments
Shreyas Pednekar
and how to get file ext?
Selçuk Cihan
For those getting
Property 'files' does not exist on type 'EventTarget' check stackoverflow.com/a/44932086/4281182
jukebox
i'm getting filename undefined.
James Rao
@SelçukCihan Thanks mate. Your comment saves my life.
You can try a more elegant option:
HTML:
<input #file type="file" (change)="updateFile(file)">
Script:
updateFile(file: HTMLInputElement) {
let name = file.value;
}
Comments
HTML
<button (click)="imgFileInput.click()">Add</button>
{{ imgFileInput?.files[0]?.name }}
<input hidden type="file" #imgFileInput (change)="uploadSingle($event)"/>
Component
uploadSingle(event) {
const fileName = event.target.files[0].name;
}
2 Comments
Ignacio Ara
Please explain your lines of code so other users can understand its functionality. Thanks!
Sampgun
This is totally unnecessary. A label with the for attribute will do the job without catching any clicks. Also I'm not completely sure you can trigger a click on a hidden element.
This work form 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 );
}
Comments
HTML
<input type="file" (change)="onFileChange($event)">
Script
onFileChange(event) {
let files = event.target.files[0].name;
}
2 Comments
Krishna Karki
How to get file path?
Vivek Singh
You can', It's a security feature in modern browsers. this can help, developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
This link's https://stackoverflow.com/a/44932086/4281182 solution suggested by @ Selçuk Cihan did not help so my workaround was to make the fileInput param type "any" by doing this
fileEvent(fileInput){
let file = fileInput.target.files[0];
let fileName = file.name;
}
so in TS runtime this is a pure JS code
Anyways thanks for this great ans it saved me a lot of time
