CODEWITHSUNDEEP
angularfile-uploadprimengprimeng-turbotablebootstrap-file-upload
user475391
user475391

Reputation: 49

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

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

Upvotes: 0

Views: 424

Answers (1)

John
John

Reputation: 481

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" />

Upvotes: 1

Related Questions