Greetings everyone! I'm currently facing a challenge with uploading multiple files in a single form which includes an array of objects with files. While handling a single file upload is straightforward, dealing with multiple files in an array poses a different scenario. I'm using Angular reactive forms for a dynamic form and I am wondering how I can render the FormData object with an array of objects containing files. Furthermore, I need to know how to send all the data to the backend with a single click on the save button. The backend is implemented using Spring MVC. Any suggestions on how to achieve this would be greatly appreciated.
You can find the full source code on my Github: Source
multi-files-upload.component.html
<div class="container-fluid">
<section class="content">
<div id="main-form-content">
<form [formGroup]="documentGrp" (ngSubmit)="OnSubmit(documentGrp.value)" #uploadDocumentsForm="ngForm" ngNativeValidate>
<div class="box box-solid box-primary">
<div class="box-body" formArrayName="items">
<h2 class="page-header text-blue ">
<i class="fa fa-files-o"></i> Upload Documents
</h2>
<div class="row">
<div class="col-sm-12">
<div *ngFor="let item of items.controls; let i = index;">
<div [formGroupName]="i">
<table id="tbl-upload" class="table table-bordered">
<tbody>
<tr *ngIf="i==0" class="active">
<th>Document Name</th>
<th>Document Description</th>
<th>Document File</th>
<th> </th>
</tr>
<tr>
<td>
<div class="form-group required">
<input type="text" class="form-control" name="doc_name" formControlName="doc_name" placeholder="Enter document Category" required="">
<div class="help-block"></div>
</div>
</td>
<td>
<div class="form-group ">
<input type="text" class="form-control" name="doc_description" formControlName="doc_description" maxlength="100" placeholder="Enter document related descriptions" required="">
<div class="help-block"></div>
</div>
</td>
<td>
<div class="form-group required">
<input type="file" name="admission_docs_path" title="Browse Document" (change)="fileSelectionEvent($event)" required="">
<div class="help-block"></div>
</div>
</td>
<td class="remove" *ngIf=" i!=0 ">
<a title="Remove" (click)="removeItem(i)" class="fa fa-minus-square fa-lg text-red"></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="pull-right">
<a class="btn btn-sm btn-success" title="Add More" style="" (click)="addItem()">
<i class="fa fa-plus-square"></i> Add More</a>
</div>
</div>
</div>
</div>
<div class="box-footer" style="align-content: center">
<button type="submit" class="btn btn-primary pull-right">Save</button>
</div>
</div>
</form>
</div>
</section>
</div>
multi-files-upload.component.ts
import { Component, OnInit, Renderer } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray, FormControl, NgForm } from '@angular/forms';
import { MultifilesService } from './multifiles.service'
// Component and Service code here...
Multifiles.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
// Service code here...
UploadController.java
@PostMapping("uploadFiles")
public String uploadMultiFiles(HttpServletRequest request)
{
// Controller code here...
}