dc/ng2-file-upload
4
0
Fork 0
Code Issues 395 Pull Requests 27 Packages Projects Releases 4 Wiki Activity

Can't bind to 'uploader' since it isn't a known native property while using ng2-file-upload #268

New Issue
Open
opened 2016-06-22 12:23:39 +00:00 by NayabHussain · 18 comments
NayabHussain commented 2016-06-22 12:23:39 +00:00 (Migrated from github.com)
Copy Link

I am getting this error while using ng2fileselect [uploader]

I am getting this error while using ng2fileselect [uploader]
Vantablack commented 2016-07-10 17:24:06 +00:00 (Migrated from github.com)
Copy Link

Try adding FILE_UPLOAD_DIRECTIVES into your component's directives

@Component({
  selector: 'simple-demo',
  template: template,
  directives: [FILE_UPLOAD_DIRECTIVES, ... ]
})

Source: http://valor-software.com/ng2-file-upload/

Try adding `FILE_UPLOAD_DIRECTIVES` into your component's directives ``` typescript @Component({ selector: 'simple-demo', template: template, directives: [FILE_UPLOAD_DIRECTIVES, ... ] }) ``` Source: http://valor-software.com/ng2-file-upload/
cili93 commented 2016-10-20 11:27:45 +00:00 (Migrated from github.com)
Copy Link

make sure you have it imported in your module

make sure you have it imported in your module
kurtuluso commented 2016-11-06 10:33:25 +00:00 (Migrated from github.com)
Copy Link

Add FileUploadModule to your module:

import {FileUploadModule} from "ng2-file-upload/components/file-upload/file-upload.module";

@NgModule({
    imports: [CommonModule,FileUploadModule],
    declarations: [NewJobComponent],
    exports: [NewJobComponent]
})

export class NewJobModule { }
Add FileUploadModule to your module: ``` import {FileUploadModule} from "ng2-file-upload/components/file-upload/file-upload.module"; @NgModule({ imports: [CommonModule,FileUploadModule], declarations: [NewJobComponent], exports: [NewJobComponent] }) export class NewJobModule { } ```
👍 5
hetzbr commented 2016-11-06 15:33:07 +00:00 (Migrated from github.com)
Copy Link

Thank you! This fixed it for me

Thank you! This fixed it for me
ShmilyLin commented 2016-12-02 11:19:27 +00:00 (Migrated from github.com)
Copy Link

@hetzbr Hi, how do you solved the question about "Can't bind to 'uploader'"? I tried all above the ways，but cant solve the problem .why

@hetzbr Hi, how do you solved the question about "Can't bind to 'uploader'"? I tried all above the ways，but cant solve the problem .why
hetzbr commented 2016-12-02 12:01:26 +00:00 (Migrated from github.com)
Copy Link

I had to add FileUploadModule as an import in my components module

I had to add FileUploadModule as an import in my components module
ShmilyLin commented 2016-12-05 03:57:43 +00:00 (Migrated from github.com)
Copy Link

@hetzbr Thank you! FileUploadModule can not be add grandfather module, if it is added，the problem will happen.

@hetzbr Thank you! FileUploadModule can not be add grandfather module, if it is added，the problem will happen.
andreasscheck commented 2017-01-23 09:33:46 +00:00 (Migrated from github.com)
Copy Link

Any news here? I'm running into the same issue. I migrated an Angular 2 app from a beta version to the current (2.3.1). Everything went fine but not the fileupload.

My module.ts:

...
import { FileUploadModule } from 'ng2-file-upload';
@NgModule({
  declarations: [
...
  ],
  imports: [
...
    FileUploadModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

the template:

...
  <div ng2-file-drop
        [uploader]="uploader"
        class="well my-drop-zone hasBaseDropZoneOver">
...

Error I get:
Can't bind to 'uploader' since it isn't a known property of 'div'

Any news here? I'm running into the same issue. I migrated an Angular 2 app from a beta version to the current (2.3.1). Everything went fine but not the fileupload. My module.ts: ``` ... import { FileUploadModule } from 'ng2-file-upload'; @NgModule({ declarations: [ ... ], imports: [ ... FileUploadModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ``` the template: ``` ... <div ng2-file-drop [uploader]="uploader" class="well my-drop-zone hasBaseDropZoneOver"> ... ``` Error I get: Can't bind to 'uploader' since it isn't a known property of 'div'
hetzbr commented 2017-01-23 17:53:08 +00:00 (Migrated from github.com)
Copy Link

@andreasscheck

You have:
import { FileUploadModule } from 'ng2-file-upload';

For version 1.2.0 it should be:
import { FileUploadModule } from 'ng2-file-upload/file-upload/file-upload.module';

For version < 1.2.0
import { FileUploadModule } from 'ng2-file-upload/components/file-upload/file-upload.module';

upload.module.ts

@NgModule({
    imports: [CommonModule, FileUploadModule, FormsModule],
    declarations:[...],
    exports: [...],
})
@andreasscheck You have: ` import { FileUploadModule } from 'ng2-file-upload';` For version 1.2.0 it should be: `import { FileUploadModule } from 'ng2-file-upload/file-upload/file-upload.module';` For version < 1.2.0 `import { FileUploadModule } from 'ng2-file-upload/components/file-upload/file-upload.module';` upload.module.ts ``` @NgModule({ imports: [CommonModule, FileUploadModule, FormsModule], declarations:[...], exports: [...], }) ```
andreasscheck commented 2017-01-23 20:14:11 +00:00 (Migrated from github.com)
Copy Link

Thanks for your reply,

actually I tried your suggested import statements before and failed. The Problem was not only the Import but also my template:

old (not working)

  <div ng2-file-drop
        [uploader]="uploader"
        class="well my-drop-zone hasBaseDropZoneOver">

   </div>

new (working):

  <div ng2FileDrop
  	[uploader]="uploader"
        class="well my-drop-zone hasBaseDropZoneOver">
    
  </div>
Thanks for your reply, actually I tried your suggested import statements before and failed. The Problem was not only the Import but also my template: old (not working) ``` <div ng2-file-drop [uploader]="uploader" class="well my-drop-zone hasBaseDropZoneOver"> </div> ``` new (working): ``` <div ng2FileDrop [uploader]="uploader" class="well my-drop-zone hasBaseDropZoneOver"> </div> ```
NColey commented 2017-02-01 15:47:57 +00:00 (Migrated from github.com)
Copy Link

@hetzbr I just tried that and for some reason it's not solving the issue for me, or rather, it created a new issue. Originally I had the error "Can't bind to 'uploader' since it isn't a known property of 'ng2FileDrop'" much like the original poster. I updated my FileUploadModule import statement as per your comment (I am using ng2-file-upload v1.2.0) but now I have the error:

 "(SystemJS) Unexpected token <↵ SyntaxError: Unexpected token <↵ at eval (<anonymous>)↵	   at Object.eval (http://localhost:4200/assets/app/pages/pages.module.js:16:28)" .

I have checked everywhere and it looks like nothing is out of place and it does compile fine the page just wont load. There definitely isn't an unexpected token, I usually get that error when something else is wrong, and the only change I made to produce that error was changing where FileUploadModule was imported from (from ng2-file-upload to ng2-file-upload/file-upload/file-upload.module). Any advice would be appreciated.

For my module I have, essentially:

 import { FileUploadModule }  from 'ng2-file-upload/file-upload/file-upload.module';
 import { PageComponent } from './page.component';

 @NgModule({
   imports: [ FileUploadModule ],
   exports: [],
   declarations: [ PageComponent ]
   providers: []
 })

 export class PagesModule{}

For my component I have:

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

 @Component({
   moduleId: module.id,
   selector: 'my-page'
   templateUrl: 'page.component.html'
 })

 export class PageComponent {

   public uploader:FileUploader = new FileUploader({url: 'url'});
   public hasBaseDropZoneOver:boolean = false;
   public hasAnotherDropZoneOver:boolean = false;

   public fileOverBase(e:any):void {
     this.hasBaseDropZoneOver = e;
   }

   public fileOverAnother(e:any):void {
     this.hasAnotherDropZoneOver = e;
   }
 }

In my template I have:

 <div ng2FileDrop (fileOver)-'fileOverBase($event)' [uploader]="uploader">Base Drop Zone</div>

In my systemjs.config.js file ng2-file-upload is included like so:

       'ng2-file-upload':  'npm:ng2-file-upload/bundles/ng2-file-upload.umd.js'

I've been trying to get this working for a few hours now but all the little tweaks I make just produce errors where it cannot recognize ng2FileDrop

Edit: I just tried modifying my systemjs.config.js to under map to be:

 'ng2-file-upload': 'npm:ng2-file-upload'

and also included under packages:

 'ng2-file-upload': { defaultExtension: 'js'}

And it eliminated the unexpected token error but brought back the "Can't bind to 'uploader' since it isn't a known property of 'ng2FileDrop'" even though I am importing FileUploadModule correctly as per your above comment for ng2-file-upload v1.2.0. Any advice on how to resolve this would be very much appreciated.

Another update: Have also tried loading in systemjs.config.js using the method mentioned 15 days ago in this github issue but am encountering the "Can't bind to 'uploader' since it isn't a known property of 'ng2FileDrop'" error again. However, I suspect the commenter in that github issue is using an older version of ng2-file-drop because of his use of the FILE_UPLOAD_DIRECTIVES and no mention of FileUploadModule. It seems like there really isn't much information out there, either in the docs or in other github issues I have found that shows how to set this up for ng2-file-drop v1.2.0 with systemjs.

@hetzbr I just tried that and for some reason it's not solving the issue for me, or rather, it created a new issue. Originally I had the error "Can't bind to 'uploader' since it isn't a known property of 'ng2FileDrop'" much like the original poster. I updated my `FileUploadModule` import statement as per your comment (I am using ng2-file-upload v1.2.0) but now I have the error: "(SystemJS) Unexpected token <↵ SyntaxError: Unexpected token <↵ at eval (<anonymous>)↵ at Object.eval (http://localhost:4200/assets/app/pages/pages.module.js:16:28)" . I have checked everywhere and it looks like nothing is out of place and it does compile fine the page just wont load. There definitely isn't an unexpected token, I usually get that error when something else is wrong, and the only change I made to produce that error was changing where `FileUploadModule` was imported from (from `ng2-file-upload` to `ng2-file-upload/file-upload/file-upload.module`). Any advice would be appreciated. For my module I have, essentially: import { FileUploadModule } from 'ng2-file-upload/file-upload/file-upload.module'; import { PageComponent } from './page.component'; @NgModule({ imports: [ FileUploadModule ], exports: [], declarations: [ PageComponent ] providers: [] }) export class PagesModule{} For my component I have: import { FileUploader } from 'ng2-file-upload'; @Component({ moduleId: module.id, selector: 'my-page' templateUrl: 'page.component.html' }) export class PageComponent { public uploader:FileUploader = new FileUploader({url: 'url'}); public hasBaseDropZoneOver:boolean = false; public hasAnotherDropZoneOver:boolean = false; public fileOverBase(e:any):void { this.hasBaseDropZoneOver = e; } public fileOverAnother(e:any):void { this.hasAnotherDropZoneOver = e; } } In my template I have: <div ng2FileDrop (fileOver)-'fileOverBase($event)' [uploader]="uploader">Base Drop Zone</div> In my `systemjs.config.js` file `ng2-file-upload` is included like so: 'ng2-file-upload': 'npm:ng2-file-upload/bundles/ng2-file-upload.umd.js' I've been trying to get this working for a few hours now but all the little tweaks I make just produce errors where it cannot recognize `ng2FileDrop` Edit: I just tried modifying my systemjs.config.js to under map to be: 'ng2-file-upload': 'npm:ng2-file-upload' and also included under packages: 'ng2-file-upload': { defaultExtension: 'js'} And it eliminated the unexpected token error but brought back the "Can't bind to 'uploader' since it isn't a known property of 'ng2FileDrop'" even though I am importing FileUploadModule correctly as per your above comment for ng2-file-upload v1.2.0. Any advice on how to resolve this would be very much appreciated. Another update: Have also tried loading in systemjs.config.js using the method mentioned 15 days ago in this [github issue](https://github.com/valor-software/ng2-file-upload/issues/38#issuecomment-273129524) but am encountering the "Can't bind to 'uploader' since it isn't a known property of 'ng2FileDrop'" error again. However, I suspect the commenter in that github issue is using an older version of `ng2-file-drop` because of his use of the `FILE_UPLOAD_DIRECTIVES` and no mention of `FileUploadModule`. It seems like there really isn't much information out there, either in the docs or in other github issues I have found that shows how to set this up for `ng2-file-drop` v1.2.0 with systemjs.
hetzbr commented 2017-02-02 20:38:03 +00:00 (Migrated from github.com)
Copy Link

@NColey

You reference the FileUploader in your component like:
import { FileUploader } from 'ng2-file-upload';

You need to reference it as:

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

If you look at the node_modules folder, ng2-file-upload is the folder, ng2-file-upload.d.ts is the typescript definition file in that folder

@NColey You reference the FileUploader in your component like: ` import { FileUploader } from 'ng2-file-upload';` You need to reference it as: `import { FileUploader } from 'ng2-file-upload/ng2-file-upload';` If you look at the node_modules folder, ng2-file-upload is the folder, ng2-file-upload.d.ts is the typescript definition file in that folder
NColey commented 2017-02-02 20:46:31 +00:00 (Migrated from github.com)
Copy Link

@hetzbr

Hi, I just updated to import FileUploader from 'ng2-file-upload/ng2-file-upload' and I am still receiving the exact same error message that uploader is not a known property of 'ng2FileDrop'. Is
there another piece I am missing?

@hetzbr Hi, I just updated to import `FileUploader` from `'ng2-file-upload/ng2-file-upload'` and I am still receiving the exact same error message that uploader is not a known property of 'ng2FileDrop'. Is there another piece I am missing?
NColey commented 2017-02-02 20:47:52 +00:00 (Migrated from github.com)
Copy Link

@hetzbr If it helps my full setup is here: https://github.com/valor-software/ng2-file-upload/issues/608 as I have made some updates to the code I originally posted yesterday while trying to fix this issue. I am still receiving the same error message about uploader not being a known property of ng2FileDrop even with the updated code.

@hetzbr If it helps my full setup is here: https://github.com/valor-software/ng2-file-upload/issues/608 as I have made some updates to the code I originally posted yesterday while trying to fix this issue. I am still receiving the same error message about uploader not being a known property of `ng2FileDrop` even with the updated code.
hetzbr commented 2017-02-03 15:26:19 +00:00 (Migrated from github.com)
Copy Link

@NColey

This setup looks very similar to mine, and I don't see anything obviously wrong, can you post the full HTML?

The error showed:

<ng2FileDrop (fileOver)='fileOverAnother($event)' [ERROR ->][uploader]='uploader'> Base Drop Zone </ng2FileDrop>

This makes me think it might be something out of place in the HTML

@NColey This setup looks very similar to mine, and I don't see anything obviously wrong, can you post the full HTML? The error showed: ` <ng2FileDrop (fileOver)='fileOverAnother($event)' [ERROR ->][uploader]='uploader'> Base Drop Zone </ng2FileDrop>` This makes me think it might be something out of place in the HTML
NColey commented 2017-02-03 15:38:56 +00:00 (Migrated from github.com)
Copy Link

So unfortunately we use haml in this project. I shared the html that it was compiling to above (in my IDE I can see the compiled html file that is being spat out as well as the haml file we edit and work in) because I thought that would make more sense but the haml I have directly in the project looks like this:

 %ng2FileDrop{'(fileOver)' => 'fileOverAnother($event)', '[uploader]' => 'uploader'}
    Base Drop Zone

I know that haml is kind of a pain sometimes, particularly with figuring out the right way to set it up for angular2 so I even tried just using

%ng2FileDrop

as that pretty consistently will point out for me when I am making a haml error vs a component not being recognized but when It's just that (with fileOver and uploader and everything else removed I receive this error:

Unhandled Promise rejection: Template parse errors: 'ng2FileDrop' is not a known element:
 1. If 'ng2FileDrop' is an Angular component, then verify that it is part of this module.
 2. If 'ng2FileDrop' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

Which seems to indicate that somehow the Module or the file drop components themselves are not being recognized (it could still be a haml/html error though but I'm hoping not because haml is such a pain to get right with angular2).

Update: As a test I deleted everything in the template except for the following code (so now the full template is just the ng2FileDrop bit):

 %ng2FileDrop
   Base Drop Zone

And this is the error:

 Unhandled Promise rejection: Template parse errors: 'ng2FileDrop' is not a known element:
 1. If 'ng2FileDrop' is an Angular component, then verify that it is part of this module.
 2. If 'ng2FileDrop' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ng2FileDrop>
   UPLOAD A FILE
 </ng2FileDrop>
 ")
So unfortunately we use haml in this project. I shared the html that it was compiling to above (in my IDE I can see the compiled html file that is being spat out as well as the haml file we edit and work in) because I thought that would make more sense but the haml I have directly in the project looks like this: %ng2FileDrop{'(fileOver)' => 'fileOverAnother($event)', '[uploader]' => 'uploader'} Base Drop Zone I know that haml is kind of a pain sometimes, particularly with figuring out the right way to set it up for angular2 so I even tried just using %ng2FileDrop as that pretty consistently will point out for me when I am making a haml error vs a component not being recognized but when It's just that (with `fileOver` and `uploader` and everything else removed I receive this error: Unhandled Promise rejection: Template parse errors: 'ng2FileDrop' is not a known element: 1. If 'ng2FileDrop' is an Angular component, then verify that it is part of this module. 2. If 'ng2FileDrop' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. Which seems to indicate that somehow the Module or the file drop components themselves are not being recognized (it could still be a haml/html error though but I'm hoping not because haml is such a pain to get right with angular2). Update: As a test I deleted everything in the template except for the following code (so now the full template is just the ng2FileDrop bit): %ng2FileDrop Base Drop Zone And this is the error: Unhandled Promise rejection: Template parse errors: 'ng2FileDrop' is not a known element: 1. If 'ng2FileDrop' is an Angular component, then verify that it is part of this module. 2. If 'ng2FileDrop' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ng2FileDrop> UPLOAD A FILE </ng2FileDrop> ")
NColey commented 2017-02-03 16:34:15 +00:00 (Migrated from github.com)
Copy Link

@hetzbr You were definitely right about it being a templating issue, I think I've finally got it (or at least I've got the drop zone to recognize when something has been dragged over it, and if that works I can take it from there) with the following haml:

 %div{'ng2FileDrop' => true, '[ngClass]' => '{"nv-file-over": hasBaseDropZoneOver}', '(fileOver)' => 'fileOverBase($event)', '[uploader]' => 'uploader', :class => 'well my-drop-zone'}
      UPLOAD A FILE

Thank you so much for catching that it was a templating issue and not a module loading one, I think the errors about the ng2FileDrop component not being recognized were totally setting me in the wrong direction. I appreciate all your help and hopefully the above code will help anyone else who is trying to use haml with ng2FileDrop.

@hetzbr You were definitely right about it being a templating issue, I think I've finally got it (or at least I've got the drop zone to recognize when something has been dragged over it, and if that works I can take it from there) with the following haml: %div{'ng2FileDrop' => true, '[ngClass]' => '{"nv-file-over": hasBaseDropZoneOver}', '(fileOver)' => 'fileOverBase($event)', '[uploader]' => 'uploader', :class => 'well my-drop-zone'} UPLOAD A FILE Thank you so much for catching that it was a templating issue and not a module loading one, I think the errors about the `ng2FileDrop` component not being recognized were totally setting me in the wrong direction. I appreciate all your help and hopefully the above code will help anyone else who is trying to use haml with ng2FileDrop.
👍 1
hetzbr commented 2017-02-03 18:28:50 +00:00 (Migrated from github.com)
Copy Link

@NColey

Oh cool! I wasn't sure how to write a div in HAML, but was trying to test if that was the reason. Glad you got it working! :)

@NColey Oh cool! I wasn't sure how to write a div in HAML, but was trying to test if that was the reason. Glad you got it working! :)
👍 1
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
dependencies
Pull requests that update a dependency file
 duplicate
enhancement
greenkeeper
help wanted
in progress
invalid
need to reproduce
question
status: pending
wontfix
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
allan medjedovic root sabhas
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#268
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?