Not able to link file input tag to angular component function

Question

I am trying to do something very basic in angular . The idea is to just read a log file and display the same in tabular format after processing it and filtering it.

I have completed the heroes tutorial. My project has just one component.

app.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

<app-maindisplay></app-maindisplay>

maindisplay.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-maindisplay',
  templateUrl: './maindisplay.component.html',
  styleUrls: ['./maindisplay.component.css']
})
export class MaindisplayComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  handleFile(InputFileList: FileList): void {
    console.log('The Handle file got called');
  }
}

maindisplay.component.html

<div style="text-align:left">
  <input type="file" id="LogFileInput" onchange="handleFile(this.files)">
</div>

The file dialogue box comes up correctly.

However, when the file is selected on chrome console, following error message comes up.

Uncaught ReferenceError: handleFile is not defined at HTMLInputElement.onchange (localhost/:13)

Can you please help me fix this issue ? Once the function is called I would be able to handle the file manipulation.

Best Regards, Vinayak

Happy to help you

Aravind
– Aravind

2018-01-19 17:39:20 +00:00
Commented Jan 19, 2018 at 17:39 — Aravind
– Aravind, Commented Jan 19, 2018 at 17:39

Aravind · Accepted Answer · 2018-01-19 17:25:20Z

1

You should be using (change) and pass the $event to the method

<input type="file" id="LogFileInput" (change)="handleFile($event)">

You can access the file in your method using

event.target.files

Typescript method should look like

handleFile(event): void {
   this.files = event.target.files;
   console.log('The Handle file got called');
   console.log(this.files); // logs selected files
}

answered Jan 19, 2018 at 17:25

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Not able to link file input tag to angular component function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related