Angular 2 trigger file upload in parent component

Question

i want to trigger file upload in router parent component. It should call two functions that are present in parent, openFileSelect and uploadSelectedFile to control the <input type="file"> element.

My router looks like this:

{ 
    path: '', 
    component: HomeComponent,
    canActivate: [AuthService],
    children: [
        {
            path: '',
            redirectTo: '/dashboard',
            pathMatch: 'full'
        },
        {
            path: 'dashboard',
            component: DashboardComponent
        },
        {
            path: 'upload',
            component: UploadComponent
        }
    ]
}

The file input is in HomeComponent.html template and router-outlet where the child component is displayed:

<div class="container">
    <input type="file" (change)="fileChangeEvent($event)" #fileUpload>
    <router-outlet></router-outlet>
</div>

Then in HomeComponent.ts i have:

import { Component } from "@angular/core";

@Component({
    templateUrl: "home.component.html",
})
export class HomeComponent {

    filesToUpload: Array<File>;

    constructor() {
        this.filesToUpload = [];
    }

    openFileSelect() {
        // TODO - How to programmatically trigger click event on <input type="file"> ?
    }

    uploadSelectedFile() {
        this.makeFileRequest("http://localhost:3000/upload", [], this.filesToUpload).then((result) => {
             console.log(result);
        }, (error) => {
             console.error(error);
        });
    }

    fileChangeEvent(fileInput: any){
        this.filesToUpload = <Array<File>> fileInput.target.files;
    }

    makeFileRequest(url: string, params: Array<string>, files: Array<File>) {
        ... XHR request ...
    }
}

At the end i want to trigger the same openFileSelect method from HomeComponent inside UploadComponent

import { Component } from "@angular/core";

@Component({
    templateUrl: "upload.component.html",
})
export class UploadComponent {

    constructor() { }

    openFileSelectInHomeComponent() {
        // TODO - how to call HomeComponent.openFileSelect() ?
    }
}

So i have two questions:

How to programmatically trigger click event on ?
And how to call function from child component to router parent component?

score 0 · Answer 1 · edited May 23 '17 at 10:30

0

There is a similar answer to your question here: jQuery : simulating a click on a <input type="file" /> doesn't work in Firefox?

Maybe it will give you an idea. Or you can use a UI control like primeNg's FileUpload control.

edited May 23 '17 at 10:30

Community

1
1

answered Oct 14 '16 at 14:16

John Baird

2,606
1
14
33

I have achieved that if i click on one button to trigger file upload click event but that is not my goal. I want to trigger it by calling a function, for example when user enters all the data it would trigger file input dialog. The way i have achieved that is with mentioned `#fileUpload` reference variable. My problem is that i dont know how to send event to that variable inside components function. It should go somehow with `@ViewChild` decorator, but i had no success. – BoonZ Oct 14 '16 at 17:18

Angular 2 trigger file upload in parent component

1 Answers1