uploader since it isn't a known property of div

[Hasnain-Bukhari]

When I am trying to use this component.Every thing works fine. But the error generated on uploader is not the known property of div/ can't bind to uploader.

[ERROR ->][uploader]="uploader"

I have imported all necessary things.

[bortexz]

Hi, can you provide the ts code where the uploader is?

When I've seen this error has been because of not having imported the FIleUploadModule into my main module.

[alex88]

The thing is, docs are completely missing, there is no quickstart that explains what to import and where

[devqualwebs]

alex88 you are right, I was also facing the same issue. But, I found solution for this. We have to add module 'FileUploadModule' in our module and import it.

[pangky24]

I also have that issue so registered below. https://github.com/valor-software/ng2-file-upload/issues/544

I wonder your installation guide is right?. I mean your giude doesn't allow me to make the right upload module. check it out and give me a right guide.

[pangky24]

I have solved like this. [attr.uploader]

I hope your sample project's code has to modify like below as soon as possible.

Angular2 File Upload

Select files

Base drop zone

Another drop zone

Multiple
Single

    <div class="col-md-9" style="margin-bottom: 40px">

        <h3>Upload queue</h3>
        <p>Queue length: {{ uploader?.queue?.length }}</p>

        <table class="table">
            <thead>
            <tr>
                <th width="50%">Name</th>
                <th>Size</th>
                <th>Progress</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let item of uploader.queue">
                <td><strong>{{ item?.file?.name }}</strong></td>
                <td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
                <td *ngIf="uploader.isHTML5">
                    <div class="progress" style="margin-bottom: 0;">
                        <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
                    </div>
                </td>
                <td class="text-center">
                    <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                    <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                    <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                </td>
                <td nowrap>
                    <button type="button" class="btn btn-success btn-xs"
                            (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
                        <span class="glyphicon glyphicon-upload"></span> Upload
                    </button>
                    <button type="button" class="btn btn-warning btn-xs"
                            (click)="item.cancel()" [disabled]="!item.isUploading">
                        <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                    </button>
                    <button type="button" class="btn btn-danger btn-xs"
                            (click)="item.remove()">
                        <span class="glyphicon glyphicon-trash"></span> Remove
                    </button>
                </td>
            </tr>
            </tbody>
        </table>

        <div>
            <div>
                Queue progress:
                <div class="progress" style="">
                    <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
                </div>
            </div>
            <button type="button" class="btn btn-success btn-s"
                    (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
                <span class="glyphicon glyphicon-upload"></span> Upload all
            </button>
            <button type="button" class="btn btn-warning btn-s"
                    (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
                <span class="glyphicon glyphicon-ban-circle"></span> Cancel all
            </button>
            <button type="button" class="btn btn-danger btn-s"
                    (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
                <span class="glyphicon glyphicon-trash"></span> Remove all
            </button>
        </div>

    </div>

</div>

[danielptm]

I was also having this problem but solved it with the above advice... in my app.module.ts file

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

... imports: [ ... FileUploadModule,

... ],

[nebiljabari]

If it can help someone. In my case the [att.uploader] adviced by @pangky24 just dodge the error but raised another one when I tried to upload: uploader is undefined.

After a lot of tries the solution for me was :

• In app.module.ts

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

@NgModule({ ... declarations: [ AppCompo, FileSelectDirective, ... , IWillUseNg2FileUploadCompo ] ... })

Ive read in some past issues, when Angular2 was still in beta, that the same kind of problem we have was raised if they inverted the order of Component or Directive `declarations`. 
Meaning that the ng2-file-upload **"have to be declared before"** the Component who will use it (in my example upper : `IWillUseNg2FileUploadCompo`)

Just in case - I use : ng-file-upload: 1.1.4-2 - Angular 2.4.0 - TypeScript 2.0.10 - SystemJs: 0.19.40

[PostImpatica]

I tried what @danielptm said but couldn't get the file uploader's module to work. I had to import the 2 directives, then it worked. Also @nebiljabari's comment about the order didn't make a difference for me. I'm fairly certain I heard them saying they fixed that order loading bug in a podcast I listed too. Finally, I had to import these 2 directives into a submodule's module I was lazy loading, not the main app.module

import { FileSelectDirective, FileDropDirective } from 'ng2-file-upload/ng2-file-upload';

[tomlobato]

Solution: https://github.com/enyo/dropzone https://github.com/zefoy/ngx-dropzone-wrapper

[adrianfaciu]

The FileUploadModule needs to be used. We'll try to get this into a better shape.

[dcr007]

In angular 7 got this fixed by adding these lines to .module.ts file:

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

 imports: [FileUploadModule,CommonModule]