Get file name from input type file Angular2

Question

I want get the file name from my html input tag in a modal view and save it using Angular2. Can someone help me?

score 36 · Accepted Answer · edited Sep 04 '17 at 10:22

36

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

edited Sep 04 '17 at 10:22

mvermand

5,829
7
48
74

answered Feb 27 '17 at 09:15

Igor Janković

5,494
6
32
46

and how to get file ext? – Shreyas Pednekar Aug 14 '18 at 05:19
5

For those getting ```Property 'files' does not exist on type 'EventTarget'``` check https://stackoverflow.com/a/44932086/4281182 – Selçuk Cihan Apr 24 '19 at 09:28
i'm getting filename undefined. – jukebox Jun 06 '19 at 10:38
1

@SelçukCihan Thanks mate. Your comment saves my life. – James Rao Jul 19 '19 at 12:30

score 3 · Answer 2 · answered Dec 26 '17 at 19:02

3

You can try a more elegant option:

HTML:

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

Script:

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

answered Dec 26 '17 at 19:02

Sergey Dzyuba

96
3

Stepan Prokopiak · Answer 3 · 2019-11-21T13:32:54.697

3

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

edited Nov 21 '19 at 13:32

answered May 31 '18 at 07:24

Stepan Prokopiak

41
1
4

Please explain your lines of code so other users can understand its functionality. Thanks! – Ignacio Ara May 31 '18 at 07:46
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. – Sampgun Feb 19 '19 at 16:30

Vivek Singh · Answer 4 · 2017-12-12T09:52:12.073

1

HTML

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

Script

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

edited Dec 12 '17 at 09:52

answered Feb 27 '17 at 09:17

Vivek Singh

1,113
10
20

1

How to get file path? – Krishna Karki Dec 12 '17 at 08:47
1

You can', It's a security feature in modern browsers. this can help, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file – Vivek Singh Dec 12 '17 at 09:57

score 1 · Answer 5 · answered Sep 07 '18 at 09:40

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

Mohammed Yousif · Answer 6 · 2019-08-08T11:50:33.090

0

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

edited Aug 08 '19 at 11:50

answered Aug 08 '19 at 11:43

Mohammed Yousif

1
1

Get file name from input type file Angular2

6 Answers6

Linked