Angular2+ File Upload with ng2-file-upload - Child component keeps calling Parent Component functions

Question

I have a parent component in which I have 2 input type="file" elements which call the function getFileForParent() on file change :

<input type="file" (change)="getFileForParent()" />

And in my child component I have one :

<input type="file" (change)="getFileForChild()" />

but whenever I select a file on the child component the parents getFileForParent is called. I am using ng2-file-upload.

Parent ts:

getFileForParent(){
    if(this.uploaderForParent.queue[0].file.type != 'application/PDF'){
        this.showError("Please select pdf files only");
        return;
    }
    this.uploaderForParent.uploadAll();
}

Child ts:

getFileForChild(){
    if(this.uploaderForChild.queue[0].file.type != 'application/PDF'){
        this.showError("Please select pdf files only");
        return;
    }
    this.uploaderForChild.uploadAll();
}

can you share your ts code

Chellappan வ
– Chellappan வ

2018-08-10 05:30:09 +00:00
Commented Aug 10, 2018 at 5:30 — Chellappan வ
– Chellappan வ, Commented Aug 10, 2018 at 5:30
@Chellappan done.

Aniruddha Gohad
– Aniruddha Gohad

2018-08-10 05:38:32 +00:00
Commented Aug 10, 2018 at 5:38 — Aniruddha Gohad
– Aniruddha Gohad, Commented Aug 10, 2018 at 5:38

Akj · Accepted Answer · 2018-08-10 06:57:25Z

Its working fine for me

DEMO

parent.component.html

<h1>
    Parent Component File inputs:
</h1>

<input type="file" ng2FileSelect [uploader]="uploaderForParent" (change)="getFileForParent()" />
<input type="file" ng2FileSelect [uploader]="uploaderForParent" (change)="getFileForParent()" />


<h1>
    Child Component File inputs:
</h1>

<app-child-comopnent></app-child-comopnent>

parent.component.ts:

uploaderForParent: FileUploader = new FileUploader({ url: 'any' });

  getFileForParent() {
    console.log("Parent");
    console.log(this.uploaderForParent);


    if (this.uploaderForParent.queue[0].file.type != 'application/PDF') {
      alert("Please select pdf files only");
      return;
    }
    //this.uploaderForParent.uploadAll();
  }

child.component.html:

<input type="file" ng2FileSelect [uploader]="uploaderForChild" (change)="getFileForChild()" />

child.component.ts:

uploaderForChild: FileUploader = new FileUploader({ url: 'any' });

getFileForChild() {

    console.log("child");
    console.log(this.uploaderForChild);
    if (this.uploaderForChild.queue[0].file.type != 'application/PDF') {
      alert("Please select pdf files only");
    }
    //this.uploaderForChild.uploadAll();
  }

Collectives™ on Stack Overflow

Angular2+ File Upload with ng2-file-upload - Child component keeps calling Parent Component functions

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