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

score 7 · Accepted Answer · answered Jul 20 '17 at 00:05

7

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!!

answered Jul 20 '17 at 00:05

JuanDM

1,250
10
24

Thanks. I have it working for some time now so I agree that is the correct answer! – thegunner Jul 20 '17 at 15:07
2

This no longer works with primeng 7.x. Still trying to find a workaround. – Alex May 30 '19 at 22:18
Which is the problem? the `event` or the `formData` object? – JuanDM Jun 03 '19 at 16:04

score 0 · Answer 2 · answered Oct 16 '18 at 14:50

I'm sending the entity alongside the files on my request as follows (see this answer for more info)

We can send the Entity serialized as JSON in a Blob inside our FormData using the correct Content-Type 'application/json'. With this we can include nested objects, add fields to our Entity -and we won't have to change the Resource Controller method signature with every new field-

curso-update.component.ts

private onBeforeSend(event) {
    const token = this.localStorage.retrieve('authenticationToken') || this.sessionStorage.retrieve('authenticationToken');
    if (!!token) {
        event.xhr.setRequestHeader('Authorization', `Bearer  ${token}`);
    }
    event.formData.append('curso', new Blob([JSON.stringify(this.curso)], { type: 'application/json' }));
}

change the Resource Controller accordingly

CursoResource.java

@PostMapping("/cursos/archivos")
@Timed
public ResponseEntity<Curso> createCurso(@Valid @RequestPart(value = "curso") Curso curso, 

@RequestPart("archivos[]")MultipartFile[] archivos) {
...
Curso result = this.cursoService.save(curso);
...
}

Add additional information to the PrimeNG FileUpload data transfer

2 Answers2