Primeng: p-fileUpload: after upgrade to primeng 7 there is no possibility to get response

[RushPVA]

there is no possibility to get response
primeng 6:
onUpload(event: any) {
const uploadedDocuments = JSON.parse(event.xhr.responseText);

primeng 7:
onUpload(event: any) {
const uploadedDocuments = JSON.parse(event.xhr.responseText);
event.xhr is undefined.

But i don't see any other possibility to obtain response in primeng7.(in our case response contains file id that was created on the backend side)

[TriplicateGirl]

I believe this was caused by a change 7.0.5.

https://github.com/primefaces/primeng/pull/7091

I am also curious how to get the response, I was doing something very similar to you.

I was also using event.formData.append in the onBeforeSend, which no longer is working either.

[andreLagacione]

I had the same issue today in version 7.0.5, the response was an empty formData and hadn't the xhr, I installed the version 7.0.5 and the response it's OK, I needed get the response for add the token in the header in onBeforeSend callback:
public addHeader(event) {
event.xhr.setRequestHeader('Authorization', Bearer ${this.uploadService.getToken()});
}

I suggest to you use the version 7.0.4, set "primeng": "7.0.4" in package.json

[klu00]

Same problem as @RushPVA : we need the xhr response in the onUpload event, but it is not present anymore :(

[vrt2015]

Is there going to be a fix for this? We would like to get access to the response back from our API

[i255]

Every second minor release breaks something in my app. That is sad. Could you please add the HttpResponse variable to the onUpload event handler like so:
this.onUpload.emit({files: this.files, event: event});
instead of this.onUpload.emit({files: this.files}); in line 329

[gasparbarancelli]

I had the same issue today in version 7.0.5, the response was an empty formData and hadn't the xhr, I installed the version 7.0.5 and the response it's OK, I needed get the response for add the token in the header in onBeforeSend callback:
public addHeader(event) {
event.xhr.setRequestHeader('Authorization', Bearer ${this.uploadService.getToken()});
}

I suggest to you use the version 7.0.4, set "primeng": "7.0.4" in package.json

You can now add the token by the httpclient interceptor.

[gasparbarancelli]

there is no possibility to get response
primeng 6:
onUpload(event: any) {
const uploadedDocuments = JSON.parse(event.xhr.responseText);

primeng 7:
onUpload(event: any) {
const uploadedDocuments = JSON.parse(event.xhr.responseText);
event.xhr is undefined.

But i don't see any other possibility to obtain response in primeng7.(in our case response contains file id that was created on the backend side)

In the previous version of the primeng was not used the httpclient to send the file, it was done by XMLHttpRequest, so the xhr was returned.
Returning the proper event of httpclient I believe it solves this problem for you.

[eltonmmoreira]

I was having the same problem as you and I just sent a pull request by adding the event to the onUpload event based on the httpclient now used in the component. To retrieve the return body of the request, access the responseEvent.body property.

[oliverfrost]

As a workaround it is possible to use custom file uploader instead of default. Even with 'base' mode.

Template:

<p-fileUpload
     customUpload="true"
     (uploadHandler)="onFileUpload($event)">
</p-fileUpload>

Component:

public onFileUpload(data: { files: File }): void {
    const formData: FormData = new FormData();
    const file = data.files[0];

    formData.append('file', file, file.name);
    this.httpClient
        .post<any>(url, formData)
        .subscribe(r => {
            // do what you need here
        })
}

[cagataycivici]

Fixed via PR.

[alan-saar]

https://www.primefaces.org/primeng/#/fileupload
the demo page is not showing the message when the file is uploaded

[fitness23]

This hasn't been fixed.

[jcmendez0907]

Hi, you can to get the response like this.
public onUpload(event) { //here is the response console.log('Response ', event.originalEvent.body); }

[masoudline]

how can i added interceptor to specific url for p-fileupload

[marco-digidip]

Before primeNg 7, i was customizing the request http headers OnBeforeSend event. Now it is not possible as from the $event i only get the formData object.

Any update on this? Do i have to write my own custom file uploader as @oliverfrost suggests?

The documentation is wrong thou because it says (about the OnBeforeSend event):
"Callback to invoke before file send begins to customize the request such as adding headers."
How?!...

[marco-digidip]

My workaround to add custom http headers to the upload file post request, was to intercept that request, clone it, and add the custom headers...

[gasparbarancelli]

To solve your problem, just create the interceptor of the httpClient of the Angular itself.
https://alligator.io/angular/httpclient-interceptors/

[AlejandroFlorin]

Yeah, this broke for me as well in 7.x. I managed to tweak my existing interceptor to include my authorization header for file uploads. But there is still an issue because event.formData.append doesn't seem to add values to the request's formData any more. I need to include various pieces of information with the upload (like the id of the user that did the upload)

Edit: Figured it out. Moving the event.formData.append from onBeforeSend to onBeforeUnload worked - it updated the request's formData successfully.

[jaybhanushali3166]

This is the code which i have been working on with:
<p-fileUpload mode="basic" name='field' [auto]='false' accept="image/*" maxFileSize="1000000" [showUploadButton]="true" [showCancelButton]="true" (onUpload)="onUpload($event)" > </p-fileUpload>
Ts File
onUpload(event) { console.log("file",event); for(let file of event.files) { this.uploadedFiles.push(file); } this.messageService.add({severity: 'info', summary: 'File Uploaded', detail: ''});

Unable to print event and get file details. Can anyone help me with this?