Why PrimeNG's FileUpload doesn't call the server after the event onBeforeUpload?

Question

I'm using PrimeNG's FileUpload component and this is my need:

To send two integer values in the same request as my files is in.

Component declaration:

<p-fileUpload #fileInputFotos name="fotos[]" method="POST" [url]="urlUploadFotos" (onBeforeUpload)="onBeforeUploadFotos($event)" (onSelect)="onSelectFotos($event)" (onRemove)="removerFoto($event)" multiple="multiple" accept="image/*" maxFileSize="1500000" 
    chooseLabel="Anexar" [showUploadButton]="false" [showCancelButton]="false">

The relevant code at '.ts' file:

onBeforeUploadFotos(event) {
    event.formData.append('idOS', this.idOSGerada);
    event.formData.append('idUser', this.userId);
}

Consider please that the Upload method is being called by the form submit button.

form declaration tag

<form #ordemServicoForm="ngForm" autocomplete="off" (ngSubmit)="salvar(ordemServicoForm)" *ngIf="!osGerada">

Relevant code at '.ts'

salvar(form: FormControl) {
    if (this.isEditando) {
      this.atualizarOrdemServico(form);
    } else {
      this.adicionarOrdemServico(form);
    }
}

adicionarOrdemServico(form: FormControl) {
    this.ordemServicoService.salvar(this.ordemServico)
      .then((result) => {
        this.fileInputFotos.upload();
        this.fileInputAnexos.upload();
        form.reset();
      })
      .catch(erro => this.errorHandler.handle(erro));
}

API Rest Resource

@PostMapping
public ResponseEntity<Object> salvar(@RequestBody MultipartFile multipartFile, HttpServletResponse response) {
    Foto fotos = new Foto();

    //TO BE IMPLEMENTED

    return ResponseEntity.status(HttpStatus.CREATED).body(new Object());
}

THE PROBLEM IS

After the event onBeforeUpload, nothing happen, no errors, everything seems to be fine, my Object is being saved in the API Rest, but the resource is not being called by Upload.

Versions

Angular CLI: 6.1.2
Node: 8.11.3
OS: win32 x64
Angular: 6.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.2
@angular-devkit/build-angular     0.7.2
@angular-devkit/build-optimizer   0.7.2
@angular-devkit/build-webpack     0.7.2
@angular-devkit/core              0.7.2
@angular-devkit/schematics        0.7.2
@angular/cli                      6.1.2
@ngtools/webpack                  6.1.2
@schematics/angular               0.7.2
@schematics/update                0.7.2
rxjs                              6.2.2
typescript                        2.7.2
webpack                           4.9.2

It will be very hard to rewrite the complete code here or even create a plunkr for this. So if someone do not understand, kindly say me your doubts before mark this post as incomplete or nonsense. I think I was quite clear with my intentions and how I'm dealing with the component in my project.

Maybe I'm walking on the wrong way and it is getting to be critical. Thank you!

Answer 1

Well, I even resolved the puzzle...

It was missing the authentication.

.

It was right at my face and I was not seeing it in the browser, maybe due to the day's weariness.

So the solution is to declare the event onBeforeSend and set the Authorization method.

HTML File

<p-fileUpload #fileInputFotos method="POST" [url]="urlUploadFotos" (onBeforeUpload)="onBeforeUploadFotos($event)" 
    (onBeforeSend)="addAuthentication($event)" (onSelect)="onSelectFotos($event)" (onRemove)="removerFoto($event)" 
    multiple="multiple" accept="image/*" maxFileSize="1500000" chooseLabel="Anexar" [showUploadButton]="false" [showCancelButton]="false">
</p-fileUpload>

Component's class File

addAuthentication(event) {
    event.xhr.setRequestHeader('Authorization', 'Basic ************************');
}

Additionally,

I must add the property name in the component HTML declaration in order to the API Rest recognize it.

<p-fileUpload #fileInputFotos name="multipartFile"...

.

@PostMapping
public ResponseEntity<Object> salvar(@RequestBody MultipartFile multipartFile....