javascript - Angular4 File upload with fom submission.? -

this .html file

<form [formgroup]="complexform" (ngsubmit)="submitform(complexform.value)">     <div class="row">         <div class="col-md-12 col-12">              <label>my name is</label>         </div>          <div class="col-md-12 col-12 q-row">             <div class="form-group" [ngclass]="{'has-error':!complexform.controls['name'].valid && complexform.controls['name'].touched}">                 <input class="form-control" type="text" [formcontrol]="complexform.controls['name']">                 <div *ngif="complexform.controls['name'].haserror('required') && complexform.controls['name'].touched" class="invalid">please provide name.</div>             </div>         </div>     </div>      <input type="file" (change)="filechanged($event)" name="file1" [formcontrol]="complexform.controls['file1']">     <input type="file" (change)="filechanged($event)" name="file2" [formcontrol]="complexform.controls['file2']">     <div class="form-group">         <button type="submit" class="btn btn-primary pull-right">submit</button>     </div>  </form> 

this .ts file

complexform : formgroup; constructor(fb: formbuilder){    this.complexform = fb.group({         'name': [],         'file1':[],         'file2':[]    }); }  filechanged(e: event) {    debugger;     var target: htmlinputelement = e.target htmlinputelement;     for(var i=0;i < target.files.length; i++) {       this.upload(target.files[i]);     }   }    upload(uploads: file) {     debugger     var formdata: formdata = new formdata();     formdata.append("files", uploads, uploads.name);     console.log(formdata); }   submitform(values){      console.log(values);      console.log(formdata);   } 

but while selecting file ,upload function called,but nothing appending formdata.i want upload file after form submission.but problem formdata.while consoling not showing anything.in formbuild not showing.so solution this?thanks in advance.

first of all, calling upload each file, , inside create new instance of formdata. means if try submit form contain last of files.

secondly, have no reference formdata instance want submit, because created var formdata: formdata = new formdata(); inside scope of upload function. so, not available inside submitform function. trying log there object prototype formdata, , not contain useful information.

in order try again need refactor code :

complexform : formgroup; // declare object here private formdata: formdata = new formdata();  constructor(fb: formbuilder){    this.complexform = fb.group({         'name': [],         'file1':[],         'file2':[]    }); }  filechanged(e: event) {    debugger;     var target: htmlinputelement = e.target htmlinputelement;     for(var i=0;i < target.files.length; i++) {       this.upload(target.files[i]);     }   }    upload(uploads: file) {     debugger     // reference instance     this.formdata.append('file', uploads, uploads.name);     console.log(formdata); }   submitform(values){      console.log(values);      // check formdata instance      console.log(this.formdata); }