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>

Answer 1

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.