Can't enable multiple upload on the upload component of Prime NG

Issue

I am trying to enable multiple uploads on the PrimeNG component for angular. And based on their documentation Upload Component Documentation I can see that we have to use a property "Multiple" to enable the multiple upload functionality. However, when I use the property given, I get an error below :

""

Below is my code :

<div class="card">
<p-fileUpload name="myfile[]" url="./upload.php" multiple="multiple"  accept=".zip, .fap">
</p-fileUpload>

I also tried setting the multiple variable to true in the component.ts file but it didn’t work for me.

export class UploadComponent implements OnInit {

  multiple: boolean ;
  constructor() { }

  ngOnInit(): void {
    this.multiple = true;
  }

}

Can I know what is my mistake?

Solution

Basically, you are not binding the property correctly.
To bind a property in a template. You need to use square brackets like this: [multiple]="multiple"

Without brackets, angular will not bind the property multiple; instead it will consider it as 'multiple' string, and primeng will give you an error: Type 'string' is not assignable to type 'boolean'.

Correct Code

<div class="card">
    <p-fileUpload name="myfile[]" url="./upload.php" [multiple]="multiple"  [auto]="true" accept=".zip, .fap">
    </p-fileUpload>
</div>

export class UploadComponent implements OnInit {

  multiple: boolean ;
  constructor() { }

  ngOnInit(): void {
    this.multiple = true;
  }

}

Answered By – Johar Zaman

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0