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

Time:10-25

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

CodePudding user response:

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

this should work [multiple]="true"

CodePudding user response:

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 >
    <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;
  }

}
  • Related