Can't bind to 'uploader' since it isn't a known property of 'input' #646

New Issue

2017-02-26T14:11:12Z

sridharreddyu commented

2017-02-26 14:11:12 +00:00

(Migrated from github.com)

In my project, I have to upload the files in various child modules. I tried N number of combinations of declaring/importing FileSelectDirective/FileUploadModule in parent or root module as well. But it is not working fine, child modules are not able to resolve uploader and getting the error "Can't bind to 'uploader' since it isn't a known property of 'input'.

But if I declare it in only one specific child module and use upload in that module, things are working fine.

I tried all the possibilities mentioned in issue #148. but nothing worked out for me.

Any help is appreciated.

In my project, I have to upload the files in various child modules. I tried N number of combinations of declaring/importing FileSelectDirective/FileUploadModule in parent or root module as well. But it is not working fine, child modules are not able to resolve uploader and getting the error "Can't bind to 'uploader' since it isn't a known property of 'input'. But if I declare it in only one specific child module and use upload in that module, things are working fine. I tried all the possibilities mentioned in issue #148. but nothing worked out for me. Any help is appreciated.

👍 1

kamalkech commented

2017-02-27 01:04:14 +00:00

(Migrated from github.com)

same error

SherryXueyingLi commented

2017-02-28 06:57:16 +00:00

(Migrated from github.com)

This is because upload attribute is defined in ./file-upload/file-select.directive, to resolve this problem, import the FileUploadModule into your module.

e.g:

import { FileUploadModule } from "ng2-file-upload"; @NgModule({ ... imports: { ... FileUploadModule } .... })

This is because upload attribute is defined in ./file-upload/file-select.directive, to resolve this problem, import the FileUploadModule into your module. e.g: `import { FileUploadModule } from "ng2-file-upload"; @NgModule({ ... imports: { ... FileUploadModule } .... })`

👍 8

kamalkech commented

2017-02-28 11:43:22 +00:00

(Migrated from github.com)

@SherryXueyingLi : not working too

amex4152 commented

2017-03-01 15:21:42 +00:00

(Migrated from github.com)

@kamalkech , I had the same error, It took me 1 day to figure out how to apply the answer from @SherryXueyingLi , I'm a complete newbie with angular 2, so I can´t help you, but try to apply the solution proposed, just remember, is not just copy paste.

yogeshwar607 commented

2017-03-02 20:50:13 +00:00

(Migrated from github.com)

any update on this guys ? getting same error .

kamalkech commented

2017-03-02 20:55:21 +00:00

(Migrated from github.com)

@amex4152 : for now i guess the solution is remove this module and search another.

lafama commented

2017-03-03 06:45:56 +00:00

(Migrated from github.com)

Import FileUploadModule into the app.module.ts file

import { FileUploadModule } from 'ng2-file-upload';
.....
@NgModule({
  declarations: [
    AppComponent,
    RegistrationFormComponent
  ],
  imports: [
    BrowserModule,
    **FileUploadModule**
  ],

then use

 import {  FileUploader } from 'ng2-file-upload';

in your current component

Import FileUploadModule into the app.module.ts file ``` import { FileUploadModule } from 'ng2-file-upload'; ..... @NgModule({ declarations: [ AppComponent, RegistrationFormComponent ], imports: [ BrowserModule, **FileUploadModule** ], ``` then use ``` import { FileUploader } from 'ng2-file-upload'; ``` in your current component

👍 3

yogeshwar607 commented

2017-03-03 07:07:55 +00:00

(Migrated from github.com)

can anybody provide working code snippet for this ?

liyakhatalikhan commented

2017-03-17 02:11:18 +00:00

(Migrated from github.com)

Finally able to work this out.

in app.module

import { FileUploadModule } from 'ng2-file-upload';

@NgModule({
imports: [
XXXX,
FileUploadModule,
XXX
],

in component.ts
import { FileUploader} from 'ng2-file-upload';

export class AccountProfileComponent implements OnInit {
uploader: FileUploader = new FileUploader({url: URL});

in html

Finally able to work this out. in app.module import { FileUploadModule } from 'ng2-file-upload'; @NgModule({ imports: [ XXXX, FileUploadModule, XXX ], in component.ts import { FileUploader} from 'ng2-file-upload'; export class AccountProfileComponent implements OnInit { uploader: FileUploader = new FileUploader({url: URL}); in html <input class="btn btn-primary btn-block" type="file" ng2FileSelect [uploader]="uploader" />

PvtPancakes commented

2017-07-19 16:52:00 +00:00

(Migrated from github.com)

This may be a little late but I ran into the same issue in my app. The previous answers are correct in their implementation, but don't work with every module configuration. My issue was that although I was importing FileUploadModule, I was still seeing the "can't bind to 'uploader'" error. This was because I was importing FileUploadModule at the root app.module instead of where it was being used.

This solution worked for me:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//import { FileUploadModule } from 'ng2-file-upload';

import { SharedModule } from '../common/shared.module';
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
	SharedModule
        // FileUploadModule <------ This wasn't working.
    ],
    declarations: [
	AppComponent,
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

And then my SharedModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { FileUploadModule } from 'ng2-file-upload';

import { ExampleModule } from './example.module';

@NgModule({
    imports: [
	CommonModule,
	FormsModule,
	FileUploadModule, <------ Placing FileUploadModule here also wasn't working by itself.
	ExampleModule
    ],
    exports: [
	CommonModule,
	FormsModule,
	FileUploadModule, <------ Placing FileUploadModule here also wasn't working by itself.
	ExampleModule
    ]
})
export class SharedModule { }

Finally, ExampleModule was declaring ExampleComponent, which is the component that actually used the FileUpload Directives:

import { NgModule } from '@angular/core';
import { FileUploadModule } from 'ng2-file-upload';

import { ExampleComponent } from './example.component';

@NgModule({
    imports: [
	FileUploadModule, <------ This line fixed my problem.
    ],
    declarations: [
	ExampleComponent,
    ],
    exports: [
	ExampleComponent
    ]
})
export class ExampleModule { }

So my SharedModule imports and exports all my shared Modules, but I still needed to import FileUploadModule in ExampleModule to tell angular that ExampleComponent has access to it.
I hope this helps some people, I know this was giving my team a headache for a while.

This may be a little late but I ran into the same issue in my app. The previous answers are correct in their implementation, but don't work with every module configuration. My issue was that although I was importing FileUploadModule, I was still seeing the "can't bind to 'uploader'" error. This was because I was importing FileUploadModule at the root app.module instead of where it was being used. This solution worked for me: ``` import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; //import { FileUploadModule } from 'ng2-file-upload'; import { SharedModule } from '../common/shared.module'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, SharedModule // FileUploadModule <------ This wasn't working. ], declarations: [ AppComponent, ], bootstrap: [AppComponent] }) export class AppModule { } ``` And then my SharedModule: ``` import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { FileUploadModule } from 'ng2-file-upload'; import { ExampleModule } from './example.module'; @NgModule({ imports: [ CommonModule, FormsModule, FileUploadModule, <------ Placing FileUploadModule here also wasn't working by itself. ExampleModule ], exports: [ CommonModule, FormsModule, FileUploadModule, <------ Placing FileUploadModule here also wasn't working by itself. ExampleModule ] }) export class SharedModule { } ``` Finally, ExampleModule was declaring ExampleComponent, which is the component that actually used the FileUpload Directives: ``` import { NgModule } from '@angular/core'; import { FileUploadModule } from 'ng2-file-upload'; import { ExampleComponent } from './example.component'; @NgModule({ imports: [ FileUploadModule, <------ This line fixed my problem. ], declarations: [ ExampleComponent, ], exports: [ ExampleComponent ] }) export class ExampleModule { } ``` So my SharedModule imports and exports all my shared Modules, but I still needed to import FileUploadModule in ExampleModule to tell angular that ExampleComponent has access to it. I hope this helps some people, I know this was giving my team a headache for a while.

👍 1

alaahong commented

2017-09-15 08:27:19 +00:00

(Migrated from github.com)

@SherryXueyingLi wow, sherry's sulotion is ok for me... BTW, What a coincidence...

😆 2

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#646