primeNG p-fileUpload Custome mode callback not triggering

Question

primeNG p-fileUpload is not trggering uploadHandler when I enable the customeMode. Could you please help me to fix this.

I need to make server request manually.

   <p-fileUpload name="invoiceFiles[]" customUpload="true" [showUploadButton]="false" multiple="multiple"
                [showCancelButton]="false" (uploadHandler)="invoiceUpload($event)">
              </p-fileUpload>

I think it is because you are hiding the upload button with [showUploadButton]="false" so the upload handler is never triggered. I have used the onSelect event to handle custom upload before, but it depends on what your exact requirements are. — mahi-man
Another option, might be to use auto="true" to start the upload as soon as a file is selected — mahi-man
@mahi I tried to store the event.files on another variable(onselect) then when user click on the submit button trying to send those data to server... but while doing that stored variable getting empty — kernal lora
You will have to show your code to figure out why it is empty. I'll post an answer with an example using onSelect which may help — mahi-man

mahi-man mahi-man · Accepted Answer · 2018-12-05T19:48:03

If you are hiding the uploadbutton, you need another way to capture the files that are selected. one way to do that is to use onSelect to store the files in an array that can be submitted with a form. Here is an example:

<p-fileUpload name="demo[]" #fileInput (onSelect)="onSelect($event)" [showUploadButton]="false" customUpload="true"></p-fileUpload>

And in the controller:

import { FormArray, FormControl, FormGroup, FormBuilder, Validators} from '@angular/forms';

private myFormFilesToUpload: FormArray;

constructor(private _fb: FormBuilder) {}

this.myForm = this._fb.group({
        //...other form controls
        filesToUpload: this._fb.array([])
});

this.myFormFilesToUpload = this.myForm.get('filesToUpload') as FormArray;

onSelect(event) {
    if (event.files && event.files.length > 0) {
        this.myForm.markAsDirty();
        this.myFormFilesToUpload.push(this._fb.group({
            fieldName: 'my_images',
            files: this._fb.array(Array.from(event.files))
        }));
    }
}

Then the files should get sent went you submit the form.

primeNG p-fileUpload Custome mode callback not triggering

1 Answers