How to fix Angular build fails due to primeng fileupload module p-fileupload tag

Question

Error: src/app/shared/fileupload/fileupload.component.html:2:87 - error NG8002: Can't bind to 'multiple' since it isn't a known prop erty of 'p-fileUpload'.

1. If 'p-fileUpload' is an Angular component and it has 'multiple' input, then verify that it is part of this module.
2. If 'p-fileUpload' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress t his message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

HTML: <p-fileUpload name="myfile[]" url="https://www.primefaces.org/cdn/api/upload.php" [multiple]="true" accept="image/*" maxFileSi ze="1000000">

app-module.ts

imported FileuploadModule

Answer 1

You probably did not correctly import FileUploadModule.

Check this AppModule example:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FileUploadModule } from 'primeng/fileupload'; // <-- import the module
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FileUploadModule, // <-- add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Also, if you have multiple NgModules, make sure to import FileUploadModule in the NgModule that declares your component. So your component should be listed in the declarations array of the same NgModule.

Your HTML fragment has a few issues as well:

• maxFileSize has an extra space
• maxFileSize has the type string instead of number
• p-fileUpload tag is not closed

Here is a corrected version:

<p-fileUpload name="myfile[]"
              url="https://www.primefaces.org/cdn/api/upload.php"
              [multiple]="true"
              accept="image/*"
              [maxFileSize]="1000000"></p-fileUpload>

Since Angular 16, components can use self-closing tags:

<p-fileUpload name="myfile[]"
              url="https://www.primefaces.org/cdn/api/upload.php"
              [multiple]="true"
              accept="image/*"
              [maxFileSize]="1000000" />