CODEWITHSUNDEEP
angularimageinputngmodel
Miger
Miger

Reputation: 1247

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

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!

Upvotes: 16

Views: 52694

Answers (5)

Th&#224;nh Vũ
Th&#224;nh Vũ

Reputation: 1

//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)">

Upvotes: 0

Nicolas Bodin
Nicolas Bodin

Reputation: 1591

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

Upvotes: 5

AllJs
AllJs

Reputation: 1810

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)">

Upvotes: -2

Komal
Komal

Reputation: 1097

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

Upvotes: 0

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38703

Try this below way 

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

Upvotes: 31

Related Questions