title: Angular 6 Reactive form multiple file uploading to rest api
body: <p>I am creating file uploader in angular 6 using reactive form. After selecting all files, I will have an upload button to upload the files first. But, the problem is that, I couldn't get all files from the component. I have to use the event to get files on selection. Is there any ways to get the files without using the event ?</p>
  
  <pre><code>import {Component, OnDestroy, OnInit, ElementRef, ViewChild} from '@angular/core';
  import {Router, ActivatedRoute} from '@angular/router';
  import {FileuploaderService} from '../fileuploader.service';
  import {CountryService} from '../../country/country.service';
  import {ServicelocationsService} from '../../servicelocations/servicelocations.service';
  import {CategoriesService} from '../../categories/categories.service';
  import {FormBuilder, FormGroup, Validators, FormArray, FormControl} from '@angular/forms';
  
  @Component({
    selector: 'app-services-cu',
    templateUrl: '../pages/fileuploader-cu.component.html'
  })
  
  export class FileuploaderCuComponent implements OnInit {
    uploaderForm: FormGroup;
    submitted = false;
    profilepicSize = 0;
    valueofItem = 0;
    beforeorafterImage = '';
  
    constructor(private formBuilder: FormBuilder) {
    }
  
    ngOnInit() {
      this.uploaderForm = this.formBuilder.group({
        firstName: ['', Validators.required],
        lastName: ['', Validators.required],
        email: ['', [Validators.required, Validators.email]],
        password: ['', [Validators.required, Validators.minLength(6)]],
        sections: new FormArray([
          this.initSection(),
        ]),
      });
    }
  
    // convenience getter for easy access to form fields
    get f() {
      return this.uploaderForm.controls;
    }
  
    initSection() {
      return new FormGroup({
        beforeImage: new FormControl(''),
        afterImage: new FormControl('')
      });
    }
  
    addSection() {
      const control = &lt;FormArray&gt; this.uploaderForm.get('sections');
      control.push(this.initSection());
    }
  
    getSections(form) {
      return form.controls.sections.controls;
    }
  
    removeSection(i) {
      const control = &lt;FormArray&gt; this.uploaderForm.get('sections');
      control.removeAt(i);
    }
  
    uploadImagepair(i) {
      const control = &lt;FormArray&gt; this.uploaderForm.get('sections');
      // I want to get all files here and convert them into base64 encode
    }
  
    onSubmit() {
      this.submitted = true;
      // stop here if form is invalid
      if (this.uploaderForm.invalid) {
        return;
      }
      alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.uploaderForm.value));
    }
  }
  </code></pre>
  
  <p>Html file </p>
  
  <pre><code>    &lt;div class="row"&gt;
    &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt;
      &lt;div class="x_panel"&gt;
  
        &lt;form [formGroup]="uploaderForm" (ngSubmit)="onSubmit()"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-12"&gt;
              &lt;div class="form-group"&gt;
                &lt;label&gt;First Name&lt;/label&gt;
                &lt;input type="text" formControlName="firstName" class="form-control"
                       [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.firstName.errors }"/&gt;
                &lt;div *ngIf="submitted &amp;&amp; f.firstName.errors" class="invalid-feedback"&gt;
                  &lt;div *ngIf="f.firstName.errors.required" style="color: red;"&gt;First Name is required&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label&gt;Last Name&lt;/label&gt;
                &lt;input type="text" formControlName="lastName" class="form-control"
                       [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.lastName.errors }"/&gt;
                &lt;div *ngIf="submitted &amp;&amp; f.lastName.errors" class="invalid-feedback"&gt;
                  &lt;div *ngIf="f.lastName.errors.required" style="color: red;"&gt;Last Name is required&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label&gt;Email&lt;/label&gt;
                &lt;input type="text" formControlName="email" class="form-control"
                       [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.email.errors }"/&gt;
                &lt;div *ngIf="submitted &amp;&amp; f.email.errors" class="invalid-feedback"&gt;
                  &lt;div *ngIf="f.email.errors.required"&gt;Email is required&lt;/div&gt;
                  &lt;div *ngIf="f.email.errors.email" style="color: red;"&gt;Email must be a valid email address&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label&gt;Password&lt;/label&gt;
                &lt;input type="password" formControlName="password" class="form-control"
                       [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.password.errors }"/&gt;
                &lt;div *ngIf="submitted &amp;&amp; f.password.errors" class="invalid-feedback"&gt;
                  &lt;div *ngIf="f.password.errors.required"&gt;Password is required&lt;/div&gt;
                  &lt;div *ngIf="f.password.errors.minlength" style="color: red;"&gt;Password must be at least 6 characters
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!--- Section --&gt;
          &lt;div class="row"&gt;
            &lt;div formArrayName="sections"&gt;
              &lt;div class="row" *ngFor="let section of getSections(uploaderForm); let i = index"&gt;
                &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt;
                  &lt;div [formGroupName]="i"&gt;
                    &lt;input type="hidden" id="pair_id" name="pair_id" value="{{i}}"/&gt;
                    &lt;!---Uploader Section --&gt;
                    &lt;div class="col-sm-12 col-md-4"&gt;
                      &lt;div class="input-group margin-bottom-sm"&gt;
                        &lt;label&gt;{{i}} Before: &lt;/label&gt;
                        &lt;input type="file" formControlName="beforeImage" accept=".jpeg, .jpg, .png" class="form-control"&gt;
                        &lt;span style="font-size:12px;"&gt;(Formats:jpeg, jpg, png Size: 1MB)&lt;/span&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="col-sm-12 col-md-4"&gt;
                      &lt;div class="input-group margin-bottom-sm"&gt;
                        &lt;label&gt;After: &lt;/label&gt;
                        &lt;input type="file" formControlName="afterImage" accept=".jpeg, .jpg, .png" class="form-control"&gt;
                        &lt;span style="font-size:12px;"&gt;(Formats:jpeg, jpg, png Size: 1MB)&lt;/span&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;!---End of Uploader Section --&gt;
                  &lt;/div&gt;
                  &lt;br&gt;
                  &lt;div class="col-sm-12 col-md-4"&gt;
                    &lt;div class="input-group margin-bottom-sm"&gt;
                      &lt;button type="button" (click)="addSection()" class="btn btn-info btn-sm"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt;
                        Add
                      &lt;/button&gt;
                      &lt;button type="button" class="btn btn-danger btn-sm" *ngIf="getSections(uploaderForm).length &gt; 1"
                              (click)="removeSection(i)"&gt;&lt;i class="fa fa-remove"&gt;&lt;/i&gt; Delete
                      &lt;/button&gt;
                      &lt;button type="button" (click)="uploadImagepair(i)" class="btn btn-success btn-sm"&gt;&lt;i
                        class="fa fa-upload"&gt;&lt;/i&gt; Upload
                      &lt;/button&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- End Section --&gt;
          &lt;hr&gt;
  
          &lt;div class="row"&gt;
            &lt;div class="col-md-12"&gt;
              &lt;button class="btn btn-primary pull-right" [disabled]="loading" type="submit"&gt;
                Submit
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>