Angular4 File upload with fom submission.?

Question

This is my .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 your 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 my .ts file

complexForm : FormGroup;
constructor(fb: FormBuilder){
   this.complexForm = fb.group({
        'name': [],
        'file1':[],
        'file2':[]
   });
}
 fileChanged(e: Event) {
   debugger;
    var target: HTMLInputElement = e.target as 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 is called,but nothing is appending with formData.i want to upload file only after form submission.but some problem with formdata.while consoling it is not showing anything.In formbuild also it is not showing.so any solution for this?thanks in advance.

Answer 1

First of all, you are calling upload for each file, and inside it you create a new instance of FormData. This means that even if you try to submit this form it will only contain the last of the files.

Secondly, you have no reference to that FormData instance you want to submit, because it is created var formData: FormData = new FormData(); inside the scope of the upload function. So, it is not available inside the submitForm function. What you are trying to log there is the Object prototype for FormData, and it would not contain any useful information.

In order to try again you need to refactor your code :

complexForm : FormGroup;
// Declare the 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 as HTMLInputElement;
    for(var i=0;i < target.files.length; i++) {
      this.upload(target.files[i]);
    }
  }

  upload(uploads: File) {
    debugger
    // now reference the instance
    this.formData.append('file', uploads, uploads.name);
    console.log(formData);
}
  submitForm(values){
     console.log(values);
     // Check the formData instance
     console.log(this.formData);
}