ng2-file-upload: Can't bind to 'uploader' since it isn't a known property of 'input'
Trying to add a ‘single’ file uploader. Using current Development branch.
AFAICT I am following the example in the current simple-demo.ts
html:
<input type="file" ng2FileSelect [uploader]="uploader" />
(works fine if one removes the [uploader]="uploader" bit)
ts:
import {Component, Input, OnInit} from '@angular/core';
import {FileUploader} from 'ng2-file-upload';
@Component({
selector: 'client-logo',
template: `
<div id="client-logo-container" class="col-sm-12">
<input type="file" ng2FileSelect [uploader]="uploader" />
</div>
`
})
export class ClientLogoComponent {
public uploader:FileUploader = new FileUploader({url: 'https://evening-anchorage-3159.herokuapp.com/api/'});
constructor() {
}
}
Full trace:
zone.js:355 Unhandled Promise rejection: Template parse errors:
Can't bind to 'uploader' since it isn't a known property of 'input'. ("<div id="client-logo-container" class="col-sm-12">
<input type="file" ng2FileSelect [ERROR ->][uploader]="uploader" />
</div>
"): ClientLogoComponent@2:49 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
Can't bind to 'uploader' since it isn't a known property of 'input'. ("<div id="client-logo-container" class="col-sm-12">
<input type="file" ng2FileSelect [ERROR ->][uploader]="uploader" />
</div>
"): ClientLogoComponent@2:49
at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:8530:21)
at RuntimeCompiler._compileTemplate (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16905:53)
at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:85)
at Set.forEach (native)
at compile (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:49)
at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:203:28)
at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:96:43)
at http://localhost:3000/node_modules/zone.js/dist/zone.js:462:57
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:236:37)
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:136:47)
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Comments: 36
I found the solution:
add to app.module.ts this
import { FileSelectDirective } from ‘ng2-file-upload’; @NgModule({ imports: [ … ], declarations: [
FileSelectDirective ], providers: [ … ], bootstrap: [ App, ], })
+1 I have the same problem.
Adding FileUploadModule to my module has appeared to work for me:
import {FileUploadModule} from “ng2-file-upload/components/file-upload/file-upload.module”;
@NgModule({ imports: [CommonModule,FileUploadModule], declarations: [NewJobComponent], exports: [NewJobComponent] })
export class NewJobModule { }
I also had this issue. Help me this.: In app.module.ts import {FileSelectDirective, FileDropDirective } from ‘ng2-file-upload/ng2-file-upload’;
And then add to NgModule declarations both of these directives.
I still get this error when trying to use the file uploader in a nested module.
In the app.module.ts I can declare either the directives { FileSelectDirective, FileDropDirective } or import the { FileUploadModule }. Then it will work in the app.components template but not in nested modules. However, doing the same declarations/imports in the nested module does not help.
[EDIT] Finally I could solve it by importing the FileUploadModule in the parent Module of where it was used and removing all other references (angular-cli > 1.0.0.beta-20 and node <= 6). The module using the file upload directives is nested two levels under app.module.
I solved it by importing the FileUploadModule in the parent module instead of in the grandparent.
As @mjrk said. Thanks
I had the same problem. I found the solution is to add FileUploadModule only to the parent module not to the main app.module. No need to do anything elsewhere.
Hope it helps.
this is my HTML
<input type=“file” ng2FileSelect [uploader]=“upload” multiple formControlName=“file” id=“file”>
and its Component
import { FileUploadModule } from ‘ng2-file-upload/ng2-file-upload’; import { FileSelectDirective, FileUploader } from ‘ng2-file-upload/ng2-file-upload’;
export class PersonalInfoComponent implements OnInit { public upload:FileUploader= new FileUploader({url:“”}); }
Parent Module
import { FileUploadModule } from ‘ng2-file-upload/ng2-file-upload’;
@NgModule({ imports: [ … … … FileUploadModule
], export class RegistrationModule { }
and I didn’t Import/change anything in AppModule.
Can somebody correct me please.
Thanks @panasevich, I was having the same issue!
I got slightly tripped up because I needed to add the import at a sub-module level, rather than in my app.module, so took a bit of looking around to get it sorted, but all set now.
" Unexpected value ‘FileUploader’ imported by the module ‘AppModule’" this is what it show when I import FileUploader (not working even I add @NgModule to FileUploader class).