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: /

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

selectFolder is not defined.

What exactly am I doing wrong?

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/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?

• javascript
• html
• angularjs
• angular
• typescript

1 Answer 1

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 ponent function.

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

(change)="selectFolder($event)"