Angular 5 how to get file name from input with type = file

Question

I know there are simmilar questions but none cover the method for Angular 5 or at least not in a way that I understand it.

For my image upload system I need to know if a picture is attached to the input tag and what name the file has. Here is my code:

HTML:

<input 
  type="file" 
  [(ngModel)]="currentInput"
  (change)="onFileSelected($event)"
>

Angular:

export class ImageUpload {
    currentInput;

    onFileSelected(event) {
        console.log(this.currentInput);
    }
}

No matter if there is a file attached or not the value in "currentInput" is always undefined. How does this work with input when the type is equal to "file"?

Thanks!

Tried your code, works fine for me, Check this out => https://stackblitz.com/edit/angular-kl2y1z — David R, Jul 26 '18 at 10:42

score 31 · Accepted Answer · answered Jul 26 '18 at 10:37

31

Try this below way

onFileSelected(event) {
 if(event.target.files.length > 0) 
  {
    console.log(event.target.files[0].name);
  }
}

answered Jul 26 '18 at 10:37

Ramesh Rajendran

37,412
45
153
234

score 5 · Answer 2 · answered Sep 26 '21 at 22:08

@ramesh-rajendran's answer is good. If you want the TypeScript solution:

onFileSelected(event: Event) {
    const target = event.target as HTMLInputElement;
    if (target.files && target.files.length > 0) {
        console.log(target.files[0].name);
    }
}

Komal · Answer 3 · 2018-07-26T13:36:10.450

0

Give a name to input field, it is a requirement: https://angular.io/guide/forms#!#ngModel. Also, you have defined the function outside of class. function and property both need to be inside a class.

Update: Data binding not supported with file input types. It need to be done using pure javascript.

<input 
  type="file" 
  name = "currentInput"
  [(ngModel)]="currentInput"
  (change)="onFileSelected($event)"
>

export class ImageUpload {
  currentInput:any;
  onFileSelected(event) {
    console.log(event.target.files);
    this.currentInput = event.target.files; 
  }
}

edited Jul 26 '18 at 13:36

answered Jul 26 '18 at 10:51

Komal

1,068
12
23

doesn't change anything – Miger Jul 26 '18 at 10:55
Thanks for the update but that was just a typo on my behalf, your solution still doesn't do anything – Miger Jul 26 '18 at 12:01
Yes data binding not supported with file input types. It need to be done using pure javascript. – Komal Jul 26 '18 at 13:35

score 0 · Answer 4 · answered Jun 12 '23 at 09:46

0

//In your component, create a function that emits an event on file selected
import {Component, OnInit, EventEmitter} from '@angular/core';

public onFileSelected(event: EventEmitter<File[]>) {
    const file: File = event[0];
    console.log(file);
}

// In your html, attach the function to the input tag like so
<input type="file" id="file" (change)="onFileSelected($event)">

answered Jun 12 '23 at 09:46

Thành Vũ

1

You should add explanation. – Super Kai - Kazuya Ito Jun 12 '23 at 17:20
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 13 '23 at 13:18

score -2 · Answer 5 · answered Jun 03 '20 at 09:36

Try the code below. It uses event emitter which listens to input changes and returns the file object, along with its metadata. Give it a try. What I like is that you don't need an external library.

//In your component, create a function that emits an event on file selected
import {Component, OnInit, EventEmitter} from '@angular/core';

public onFileSelected(event: EventEmitter<File[]>) {
    const file: File = event[0];
    console.log(file);
}

// In your html, attach the function to the input tag like so
<input type="file" id="file" (change)="onFileSelected($event)">

The event emitted from (change) handled is NOT of type [File[]] - above code doesn't output correct file in the log — Leonya, Aug 20 '20 at 17:06

Angular 5 how to get file name from input with type = file

5 Answers5