0

I have somehow gotten pretty far along with my Angular 2 app without ever actually learning how or when to use custom/third-party directives.

Anyway, I am trying to use ng2-uploader to allow users to upload images with a form and in rc6 I have to declare the directives in my component. According to the docs at the link I provided, I need to simply import UPLOAD_DIRECTIVES to my component's directives property, but I am getting an error saying that directives is not a property of component. That can't be right, can it?

I have the ng2-uploader module and the UPLOAD_DIRECTIVES both imported in app.module.ts, with no errors. If I try to use the directives per the original docs for ng2-uploader, I get:

Unhandled Promise rejection: Template parse errors: Can't bind to 'ng-file-select' since it isn't a known property of 'input'.

I imagine this would be resolved when I can actually get the directives to work.

I feel like I am missing something stupidly obvious. Here are some sections where the problem likely exists.

app.component (irrelevant code omitted):

import { Ng2Uploader, UPLOAD_DIRECTIVES } from 'ng2-uploader';
@NgModule({
    imports: [ 
        Ng2Uploader,
    ],
    declarations: [ 
        UPLOAD_DIRECTIVES
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule {}

Component where Directives will be used:

import { UPLOAD_DIRECTIVES } from 'ng2-uploader';
@Component({
    selector: "quote-form-partial",
    templateUrl: "./app/components/partials/quote-form-partial/quote-form-partial.component.html",
    directives: [UPLOAD_DIRECTIVES]
})

    uploadFile: any;
    hasBaseDropZoneOver: boolean = false;
    options: Object = {
        url: '/uploads'
    };

    handleUpload(data): void {
        data = JSON.parse(data.response);
        this.uploadFile = data;
    }

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

HTML Template:

<input type="file"
       [ng-file-select]="options"
       (onUpload)="handleUpload($event)">
halfer
  • 19,824
  • 17
  • 99
  • 186
Smaft
  • 142
  • 10
  • 1
    Could you provide the code you have worked out so far? – Italo Ayres Nov 21 '16 at 17:23
  • 1
    The examples on the NPM site seem to be for an old version of angular2. The examples on GitHub look more reliable to me. https://github.com/jkuri/ng2-uploader#basic-example – retrospectacus Nov 21 '16 at 17:29
  • I updated my post with the code. – Smaft Nov 21 '16 at 17:40
  • As shown in the example linked by retrospectacus, there is an `Ng2UploaderModule`. Use that instead of `UPLOAD_DIRECTIVES` because the later is outdated. – Günter Zöchbauer Nov 21 '16 at 17:43
  • `I don't feel comfortable showing too much code` - if you are merely concerned about intellectual property issues, don't worry about it. It is unlikely that an algorithm worth stealing can be fitted into a question post, and we're very keen to close questions that (in the opinion of the readers who see it) does not contain enough detail. It is better to be too detailed, since that is less likely to be put on hold. – halfer Nov 21 '16 at 18:43

2 Answers2

4

directives on @Component() and @Directive() doesn't exist anymore.

You need to add it to 

@NgModule({
  imports: [Ng2UploaderModule],
  ...

I don't know if such a module actually exists but if you want to use it with a recent Angular2 version, it is required.

You can try to add UPLOAD_DIRECTIVES to

@NgModule({
  declarations: [UPLOAD_DIRECTIVES]

but I wouldn't expect this to work because of version incompatibilities

See also https://angular.io/docs/ts/latest/guide/ngmodule.html

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
0

Okay, all of your input helped point me in the right direction, so thank you.

I had actually done everything correctly early on, before I started trying using deprecated techniques out of desperation (depresperation?).

The issue actually existed in my systemjs.config, which I probably should have included in my original post. In my ng2-uploader package I did not specify ng2-uploader.js, so my app was attempting to use the non-existent index.js.

Once I added the main property definition in my packages as shown below, it worked!

'ng2-uploader': {
    main: './ng2-uploader.js',
    defaultExtension: 'js'
 }

Hopefully this will save someone else the headache!

Smaft
  • 142
  • 10