title: How to Upload multiple files in Angular 6 with ADDMORE button?
body: <p><img src="https://i.stack.imgur.com/AtolM.png" height="350"/></p>
  
  <p>Hello, Everone. I've been trying to Upload above(image) use case. I know it is very easy when we have a single file. but now the scenario is different it consists of an array of objects with the file.
  Now my question is how can I render the formdata object with the array of objects where each object consists of a file. For dynamic form, I used angular reactive forms. Can anyone please suggest me how can send whole data to the backed with the single click on save button.
  For backend I used Springmvc. 
  Thanks in advance.</p>
  
  <p>FullSource code availabe on my Github : <a href="https://github.com/SHIVAKRISHN/AngularMultipuleFilesUpload" rel="nofollow noreferrer">Source</a></p>
  
  <p>multi-files-upload.component.html</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  
    &lt;section class="content"&gt;
  
      &lt;div id="main-form-content"&gt;
        &lt;form [formGroup]="documentGrp" (ngSubmit)="OnSubmit(documentGrp.value)" #uploadDocumentsForm="ngForm" ngNativeValidate&gt;
  
  
  
          &lt;div class="box box-solid box-primary"&gt;
  
            &lt;div class="box-body" formArrayName="items"&gt;
  
  
              &lt;h2 class="page-header  text-blue "&gt;
                &lt;i class="fa fa-files-o"&gt;&lt;/i&gt; Upload Documents
              &lt;/h2&gt;
              &lt;div class="row"&gt;
                &lt;div class="col-sm-12"&gt;
  
  
                  &lt;div *ngFor="let item of items.controls; let i = index;"&gt;
                    &lt;div [formGroupName]="i"&gt;
                      &lt;table id="tbl-upload" class="table table-bordered"&gt;
                        &lt;tbody&gt;
                          &lt;tr *ngIf="i==0" class="active"&gt;
                            &lt;th&gt;Document Name&lt;/th&gt;
                            &lt;th&gt;Document Description&lt;/th&gt;
                            &lt;th&gt;Document File&lt;/th&gt;
                            &lt;th&gt;&amp;nbsp;&lt;/th&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                            &lt;td&gt;
                              &lt;div class="form-group required"&gt;
                                &lt;input type="text" class="form-control" name="doc_name" formControlName="doc_name" placeholder="Enter document Category"
                                  required=""&gt;
  
  
  
  
                                &lt;div class="help-block"&gt;&lt;/div&gt;
                              &lt;/div&gt;
                            &lt;/td&gt;
  
                            &lt;td&gt;
                              &lt;div class="form-group "&gt;
  
                                &lt;input type="text" class="form-control" name="doc_description" formControlName="doc_description" maxlength="100" placeholder="Enter document related descriptions"
                                  required=""&gt;
  
                                &lt;div class="help-block"&gt;&lt;/div&gt;
                              &lt;/div&gt;
                            &lt;/td&gt;
                            &lt;td&gt;
                              &lt;div class="form-group  required"&gt;
  
                                &lt;input type="file" name="admission_docs_path" title="Browse Document" (change)="fileSelectionEvent($event)" required=""&gt;
                                &lt;div class="help-block"&gt;&lt;/div&gt;
                              &lt;/div&gt;
                            &lt;/td&gt;
                            &lt;td class="remove" *ngIf=" i!=0 "&gt;
                              &lt;a title="Remove" (click)="removeItem(i)" class="fa fa-minus-square fa-lg text-red"&gt;&lt;/a&gt;
                            &lt;/td&gt;
                          &lt;/tr&gt;
                        &lt;/tbody&gt;
                      &lt;/table&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="pull-right"&gt;
                    &lt;a class="btn btn-sm btn-success" title="Add More" style="" (click)="addItem()"&gt;
                      &lt;i class="fa fa-plus-square"&gt;&lt;/i&gt;&amp;nbsp; Add More&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;!--./col--&gt;
              &lt;/div&gt;
              &lt;!--./row--&gt;
            &lt;/div&gt;
            &lt;!--./box-body--&gt;
            &lt;div class="box-footer" style="align-content: center"&gt;
              &lt;button type="submit" class="btn btn-primary pull-right"&gt;Save&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
  
  
    &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>multi-files-upload.component.ts</p>
  
  <pre><code>import { Component, OnInit, Renderer } from '@angular/core';
  import { FormBuilder, FormGroup, Validators, FormArray, FormControl, NgForm } from '@angular/forms';
  import { MultifilesService } from './multifiles.service'
  @Component({
    selector: 'app-multi-files-upload',
    templateUrl: './multi-files-upload.component.html',
    styleUrls: ['./multi-files-upload.component.css']
  })
  export class MultiFilesUploadComponent implements OnInit {
  
    constructor(private renderer: Renderer,
      private formBuilder: FormBuilder,
      private multifilesService: MultifilesService
    ) { }
    public documentGrp: FormGroup;
  
    ngOnInit() {
  
      this.documentGrp = this.formBuilder.group({
        doc_name: '',
        doc_description: '',
        documentFile: File,
  
        items: this.formBuilder.array([this.createUploadDocuments()])
      });
  
    }
  
  
    public doc_name = "";
    public doc_description = "";
    public documentFile: File;
  
  
  
    createUploadDocuments(): FormGroup {
      return this.formBuilder.group({
        doc_name: '',
        doc_description: '',
        documentFile: File,
      });
    }
  
    get items(): FormArray {
      return this.documentGrp.get('items') as FormArray;
    };
  
    addItem(): void {
      this.items.insert(0, this.createUploadDocuments())
    }
  
    removeItem(index: number) {
      this.items.removeAt(index);
    }
    public fileSelectionEvent(fileInput: any) {
      if (fileInput.target.files &amp;&amp; fileInput.target.files[0]) {
        var reader = new FileReader();
        reader.onload = (event: any) =&gt; {
        }
  
        this.documentFile = (fileInput.target.files[0]);
  
  
  
        console.log("the document  is" + JSON.stringify(fileInput.target.files[0].name));
        reader.readAsDataURL(fileInput.target.files[0]);
      }
    }
  
  
  
  
    public OnSubmit(formValue: any) {
      let total_form: FormData[] = [];
  
      console.log(formValue.items)
  
      formValue.items.forEach(element =&gt; {
        let upl_fom: FormData = new FormData();
        console.log("each element is", element);
        upl_fom.append('document_category', element.doc_name);
        upl_fom.append('document_details', element.doc_description);
        upl_fom.append('document_file', element.documentFile);
        total_form.push(upl_fom);
      });
  
      this.multifilesService.saveFiles(total_form).subscribe(data =&gt; {
        console.log("result is ", data)
      })
    }
  
  
  
  }
  </code></pre>
  
  <p>Multifiles.service.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient,HttpHeaders } from '@angular/common/http';
  @Injectable({
    providedIn: 'root'
  })
  export class MultifilesService {
  
    constructor(  private http: HttpClient) { }
  
    saveFiles(total_form)
    {
  
      return this.http.post("http://localhost:8181/uploadFiles",total_form);
  
    }
  
  }
  </code></pre>
  
  <p>UploadController.java   </p>
  
  <pre><code>        @PostMapping("uploadFiles")
          public String uploadMultiFiles(HttpServletRequest request)
          {
              System.out.println("hitting uploadFiles");
              Enumeration e =request.getParameterNames();
              while(e.hasMoreElements())
              {
                  System.out.println(e.nextElement());
              }
  
  
              MultipartHttpServletRequest multiPartRequest = new DefaultMultipartHttpServletRequest(request);
              try {
                  multiPartRequest = (MultipartHttpServletRequest) request;
                  multiPartRequest.getParameterMap();
                  //multipartRequest.
                  Iterator &lt; String &gt; it = multiPartRequest.getFileNames();
  
                  int i = 1;
  
                  while (it.hasNext()) {
                      MultipartFile multipart = multiPartRequest.getFile(it.next());
                      System.out.println("File name is "+multipart.getOriginalFilename());
                  }
              }catch(Exception ex) {
  
  
              }
              return "uploaded ";
          }
  </code></pre>