Calling a "function" inside a TypeScript file to HTML

Question

I'm fairly new to HTML, TypeScript, and JavaScript. I'm currently trying to get the relative path from a selected folder. I'm using code from this Stack post. I've added the HTML for selecting a folder but I'm having trouble with the JavaScript portion. This is an Angular 2 app so I have a TypeScript file. I've added my code below as well as a JSFiddle link after it.

This is my HTML:

<div class="panel panel-primary" style="border-color: #464646;">
    <div class="panel-heading" style="border-color: #BBBBBB; height: 35px; padding-top: 3px;">
        <div style="float: left; margin-top: 5px;">Select directory</div>
    </div>
    <div class="panel-body">
        <!--Directory Selection Button-->
        <div class="row">
            <input type="file" id="FileUpload" onchange="selectFolder(event)" webkitdirectory mozdirectory msdirectory odirectory directory multiple />
        </div>
    </div>
</div>

and this is my TypeScript file:

import {Component} from '@angular/core';
import {HttpModule} from "@angular/http";

@Component({
    selector: 'home',
    templateUrl: './SDI/templates/home.html',
})
export class HomeComponent {

    constructor(){ }

    selectFolder(e: any) {
        console.log('selectFolder entered.'); 

        var theFiles = e.target.files;
        var relativePath = theFiles[0].webkitRelativePath;
        var folder = relativePath.split("/");
        alert(folder[0]);
    }
}

JSFiddle link: https://jsfiddle.net/roka545/9ufc5nsg/

However, when I run the application and select a folder, my console tells me

selectFolder is not defined.

What exactly am I doing wrong?

Pankaj Parkar · Accepted Answer · 2016-10-11 18:34:15Z

8

You should use (change) instead of onchange attribute. Basically onchange event looks for function in global javascript scope(context), whereas when you wanted to call Component method associated with template, you have to follow (eventName)(event name in paranthesis) convention to call component function.

Additionally do use $event while passing parameter to function instead of event.

(change)="selectFolder($event)"

edited Oct 11, 2016 at 18:34

answered Oct 11, 2016 at 18:15

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

8 Comments

Corey Ogburn Over a year ago

$event instead of just event

Pankaj Parkar Over a year ago

@CoreyOgburn oh.. Thanks for heads, I completely missed that part, Cheers & Thanks :)

Roka545 Over a year ago

Scratch that - it works perfectly fine inside my Visual Studio project. Thanks again for the help!

Pankaj Parkar Over a year ago

@Roka545 Cool, interesting thing is you made Angular Fiddle, that's awesome, generally people do use plunkr. Thanks & Cheers :)

yurzui Over a year ago

@Roka545 I quess it should work in Fiddle jsfiddle.net/6nfa7nsa

|

Collectives™ on Stack Overflow

Calling a "function" inside a TypeScript file to HTML

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related