18

Im trying to integrate ng2-file-upload module into my application.

And im getting this template error: Can't bind to 'uploader' since it isn't a known property of 'input'

UPDATE folder str:

/src/app/app.module.ts

/src/app/components/layout/
                           layout.module.ts
                           other layout components files

                  /category-items
                            category-items.module.ts
                            category-items.component.ts

in layout.module.ts

import { LayoutComponent } from './layout.component';

declarations: [
    LayoutComponent,

in category-items.module.ts

import { CategoryItemsComponent } from './category-items.component';

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

imports: [  ...FileUploadModule ... ]

app\app.module.ts

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

 imports: [  ...FileUploadModule ... ]

app\components\layout\category-items\category-items.component.ts

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

@Component({
  selector: 'button-view',
  template: `

  <input type="file" class="form-control" name="single" ng2FileSelect [uploader]="uploader" />   

  `
  })

export class ButtonViewComponent implements ViewCell, OnInit {

...
 public uploader:FileUploader = new FileUploader({url:'http://lcoalhost:5000/upload'});

}

@Component({
  selector: 'app-category-items',
  templateUrl: './category-items.component.html',
  styleUrls: ['./category-items.component.scss']
})

export class CategoryItemsComponent implements OnInit {
...
}

Or if i try out like below: i get unexpected closing div tag

<div ng2FileDrop
         (fileOver)-'fileOverBase($event)'
         [uploader]="uploader"
         class="well my-drop-zone">
        Base drop zone
    </div>

I have tried multiple combinations of imports for 'FileUploadModule' in my app.module in various posts, but none seems to work in my case.

Error Stack trace:

"Uncaught (in promise): Error: Template parse errors:↵Can't bind to 'uploader' since it isn't a known property of 'input'. ("↵ ↵

Have googled many posts for solutions for the same:

Some of the references were: (but none helping)

https://github.com/valor-software/ng2-file-upload/issues/418

https://github.com/valor-software/ng2-file-upload/issues/608

phyme
  • 331
  • 2
  • 11
  • 25
  • 2
    did you import the `FileUploadModule` in the same module as the `CategoryItemsComponent`? Ie: is the `CategoryItemsComponent` declared **only** in the app.module.ts? – 0mpurdy Jul 25 '17 at 12:35
  • have updated my folder str, could you please tell what i am missing or what i should verify? – phyme Jul 25 '17 at 14:23
  • I suspect you haven't imported the module into the correct module - category-items.module.ts could you paste it so that I can verify – 0mpurdy Jul 25 '17 at 14:26
  • oh man, i got it ...thanks for the remainder, i had to import FileUploadModule under category-items.module.ts – phyme Jul 25 '17 at 14:28
  • I'll add it as an answer then for future users – 0mpurdy Jul 25 '17 at 14:28

2 Answers2

40

You need to import FileUploadModule in the module that declares the component using 'upload' which in your case would be category-items.module.ts

category-items.module.ts

import { CategoryItemsComponent } from './category-items.component';

import { FileUploadModule } from "ng2-file-upload";   //Should import HERE

imports: [  ...FileUploadModule ... ]   //RIGHT PLACE
0mpurdy
  • 3,198
  • 1
  • 19
  • 28
  • Thanks, I have updated the question with working answer! – phyme Jul 25 '17 at 14:41
  • perhaps it would be better for future users reading the question, trying to match it to their own situation if the answer is not also in the question? you could post the component as it was before you fixed it and I could show the fixed version here – 0mpurdy Jul 25 '17 at 14:45
  • Yes, Thanks @Ompurdy, have reverted my question ...you can also mention in your answer the place i had imported before and after correction – phyme Jul 25 '17 at 14:58
  • @phyme It will not matter that you **also** had it imported there so I won't recommend removing it in case someone else has a need for it to also be imported there. – 0mpurdy Jul 25 '17 at 15:02
  • YES! This is exactly what I was looking for. The documentation needs to be updated. – Matt Dec 09 '17 at 17:31
  • Thanks, it's a miss in documentation – Ross Oct 18 '18 at 18:02
  • Also make sure you placed the AppRoutingModule to the last in the app.module.ts imports[] @NgModule({ imports: [ ... FileUploadModule, AppRoutingModule // must be imported as the last module as it contains the fallback route ... ] – Akhil May 15 '20 at 06:05
3

add to app.module.ts this

import { FileSelectDirective } from 'ng2-file-upload';
@NgModule({
    imports: [
        ...
],
    declarations: [
        FileSelectDirective
    ],
    providers: [
        ...
],
    bootstrap: [
        App,
    ],
})

https://github.com/valor-software/ng2-file-upload/issues/418#issuecomment-249865170

Or try to import FIleUploadModule to an each parent module

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

imports: [
    FIleUploadModule,
    ..........,
    ........,
    ......,

]

It should work.

Kishore Peter
  • 31
  • 2