What's the right way to upload multiple files in angular?

I'm trying to upload a series of files to an endpoint. Using a http client in my case insomnia the process concludes satisfactorily

Http client options

Headers

Payload

With the http client I can confirm that process ends successfully

When I try the same in angular I get 400 Bad request error

@Injectable({
  providedIn: 'root',
})
export class ResourcesService {
  private readonly ENDPOINT = '/backend/api/content';

  constructor(private readonly httpClient: HttpClient) {}

  upload(files: FileList) {
    const formData = new FormData();
    formData.append('files', files[0], files[0].name);

    // Array.from(files).forEach((file) =>
    //   formData.append('files', file, file.name)
    // );

    // for (let i = 0; i < files.length; i++) {
    //   formData.append('files', files[i], files[i].name);
    // }

    return this.httpClient.post<ResourceModel[]>(
      `${this.ENDPOINT}/upload`,
      formData,
      {
        headers: new HttpH开发者_JAVA百科eaders({
          'Content-Type': 'multipart/form-data',
        }),
      }
    );
  }

I managed to solve the problem by removing the header. The other modification was to iterate each file in the list of files

The final result is the following

@Injectable({
  providedIn: 'root',
})
export class ResourcesService {
  private readonly ENDPOINT = '/backend/api/content';

  constructor(private readonly httpClient: HttpClient) {}

  upload(files: FileList) {
    const formData = new FormData();

    Array.from(files).forEach((file) =>
      formData.append('files', file, file.name)
    );

    return this.httpClient.post<ResourceModel[]>(
      `${this.ENDPOINT}/upload`,
      formData
    );
  }
}