Add additional information to the PrimeNG FileUpload data transfer

Question

I'm looking to send additional information with files that are being uploaded with the primeng fileupload component. Basically, I need to know what these uploaded files are relevant to.

I can add headers in the "onBeforeSend" function like the Authorization code as in the example below. Where could I add additional information e.g. 'DocumentID': 'A123'

onBeforeSend(event) {
    event.xhr.setRequestHeader("Authorization", 'Bearer ' + this.authService.getAccessToken());
} 

Anyone know?

Thanks

Answer 1

In onBeforeSend event of primeng fileupload control there is an object called event.formData, you can use this object to customize the request with aditional information. I was able to implement this functionality successfully in current project i'm working on.

In component.ts file:

    onBeforeSend(event) {
       event.xhr.setRequestHeader("Authorization", `Bearer ${this.authService.getToken()}`);
       event.formData.append('DocumentID', 'A123');
    }

In template.html file:

    <p-fileUpload name="test[]" 
                  [url]="url_test" 
                  (onBeforeSend)="onBeforeSend($event)" 
                  accept="image/*" 
                  maxFileSize="5000000" 
                  withCredentials="true">

Hope it helps!!