简体   繁体   中英

Want to put condition in upload image in angular2

I want to put condition when I submit or save form at that time file change function calling otherwise not. How to put that condition in below code ?

this is form template for image upload:

  <form name="form" (ngSubmit)="f.form.valid && save()" #f="ngForm" novalidate enctype="multipart/form-data">
        <div>
            <input type="file" (change)="fileChange($event)" placeholder="Upload file">
            <img [src]="employee.profile_image_url" height="50" width="50">
        </div>
 </from>

Its a form save function in component:

save(): void {
    if (this.employee.bank_details == null) {
        this.employeeService.add_bankDetails(this.model, this.employee);
    }
    if (this.employee.current_address == null) {
        this.employeeService.add_addressDetails(this.model, this.employee);
    }
    if (this.employee.permanent_address == null) {
        this.employeeService.add_PaddressDetails(this.modelP, this.employee);
    }
    this.employee.full_name = (`${this.employee.first_name} ${this.employee.last_name}`);
    this.employeeService.update(this.employee);
}

Its a filechange event for image upload in component:

fileChange(event: any) {
    const imageFolder: string = this.employee.id;
    const fileList: FileList = event.target.files;
    const file: File = fileList[0];
    const storageRef = firebase.storage().ref().child(`${imageFolder}/profile.jpg`).put(file)
    .then((snapshot) => {
    this.employee.profile_image_url  = snapshot.downloadURL;
 console.log(snapshot.downloadURL);
});

}

As I understood, I should do the following:

HTML

<form name="form" (ngSubmit)="f.form.valid && save(filename.value)" #f="ngForm" novalidate enctype="multipart/form-data">
    <input #filename type="file" placeholder="Upload file">
    <img *ngIf='isSaved' [src]="employee.profile_image_url" height="50" width="50">
</from>

Typescript:

save(fileName:string): void {
    if (this.employee.bank_details == null) {
        this.employeeService.add_bankDetails(this.model, this.employee);
    }
    if (this.employee.current_address == null) {
        this.employeeService.add_addressDetails(this.model, this.employee);
    }
    if (this.employee.permanent_address == null) {
        this.employeeService.add_PaddressDetails(this.modelP, this.employee);
    }
    this.employee.full_name = (`${this.employee.first_name} ${this.employee.last_name}`);
    this.employeeService.update(this.employee);
    //here you call file changing function
    fileChange(fileName);
}


fileChange(event: any){
  ....
  //add this at the end
  isSaved=true;
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM