is ng2-file-upload now supports angular 4 ?

[Christian-Yang]

if support ,how to update ?

thanks very much !

[kvcpr]

Yes, It is.

Import these directives to your module:

import { FileDropDirective, FileSelectDirective } from 'ng2-file-upload';
@NgModule({
  declarations: [FileDropDirective, FileSelectDirective]
})
export class AppModule { }

Then create file uploader in your component:

import { Component, OnInit } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';
@Component({
  selector: 'app-files',
  templateUrl: 'files.component.html',
  styleUrls: ['files.component.css'],
})
export class FilesComponent implements OnInit {
  uploader = new FileUploader({url: `YOUR URL`});
}

And use it in your html file:

<div ng2FileDrop  [uploader]="uploader">
<input type="file" ng2FileSelect [uploader]="uploader" multiple />

[luiscvalmeida]

@kacepe doing like you said, webpack can't compile saying that FileDropDirective is part of the declarations of 2 modules: FileUploadModule and AppModule. It says to consider moving FileDropDirective to a higher module that imports FileUploadModule and AppModule.

Edit:

So just looked around in the issues and it seems that it's enough to import the whole module:

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

[railslauncher]

@kacepe I am facing same issue reported by the @luiscvalmeida.

@luiscvalmeida Did you got Angular 4 working with ng2-file-upload?

[luiscvalmeida]

@railslauncher No I didn't, I gave up and built my own file uploader.

[nathanBrenner]

this.uploader.addToQueue is not a function

My file uploaders were working fine on Angular 2.x. I updated Angular to 4.0.0 and now I'm getting this error.

[jmbrnrd]

I'm getting a similar issue as @luiscvalmeida. ng serve works OK but if I try to build the project it throws a similar 'file-select.directive.d.ts is part of the declarations of 2 modules' error. Anyone got around this?

[Sandeepmtechie]

when I'm trying to install "npm install ng2-file-upload --save" in my angular 4 application it throws

UNMET PEER DEPENDENCY @angular/common@4.1.0
UNMET PEER DEPENDENCY @angular/core@4.1.0
`-- ng2-file-upload@1.2.1

can someone help me on this please...

[Hanzofm]

Any solution to this?

[Sandeepmtechie]

We don't have a working Package for file-upload in angular 4, if you want you have to do it by yourself..!!!!

[Jensiator]

I just got one stepfurther. It compiles and the page can be viewed. I added the FileSelectDirective declaration inside my child module 'client.module'. NOT inside the app.module.
import { FileSelectDirective } from 'ng2-file-upload';
@NgModule({
imports: [
BrowserModule,
NgbModule
],
declarations: [FileSelectDirective],
exports: [ClientComponent]
})
export class ClientModule {
}
And inside the ClientComponent I import { FileUploader } from 'ng2-file-upload';

[andmill]

@luiscvalmeida bit of a newbie here, any chance you're able to share the angular 4 directive you wrote for file upload? I have a post request that takes a form-data file parameter. Struggling to get the input file into the post parameter.

[bert-w]

it works for me out of the box using Angular 4.0.0. Only issue im having now is that I cant build for production using ng build --prod. The compilation completes but when loading the component that houses the FileUpload it errors "No provider for e!"

[AliAdravi]

I checked many and finally came out with this
http://www.advancesharp.com/blog/1218/angular-4-upload-files-with-data-and-web-api-by-drag-drop

It works like charms for me without any third party control with configurable properties like size, extension, max files with extra data.

[adrianfaciu]

It supports Angular 4 now. Using it in a project with this and it gets the job done.

[hiroyalty]

It does not support angular 4. You should not have close this trail.

Thank you

[adrianfaciu]

I have it running in an application with 4.4.3. If you have some specific problem please open an issue with more details about it.

[hiroyalty]

The Same error as reported above:
Error: No provider for FileUploader!

After following the documentation and doing as stated
https://valor-software.com/ng2-file-upload/

import { FileDropDirective, FileSelectDirective } from 'ng2-file-upload';
@NgModule({
declarations: [FileDropDirective, FileSelectDirective]
})
export class AppModule { }

import { Component, OnInit } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';
@component({
selector: 'app-files',
templateUrl: 'files.component.html',
styleUrls: ['files.component.css'],
})
export class FilesComponent implements OnInit {
uploader = new FileUploader({url: YOUR URL});
}

Base drop zone

        <div ng2FileDrop
             [ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}"
             (fileOver)="fileOverAnother($event)"
             [uploader]="uploader"
             class="well my-drop-zone">
            Another drop zone
        </div>

I am runing Angular 4.3.5. on ubuntu 16.04

The reality here is that no one has said on this trail that they are able to make it work apart from @adrianfaciu, and neither did @adrianfaciu show us anything he did to make it work.

so I do not believe this trail should be closed without doing justice to the purpose for which it is started in the first place.

[adrianfaciu]

@hiroyalty some of the comments specify that you need to import the module. Similar to other libraries you might be using import { FileUploadModule } from 'ng2-file-upload';
After you import it you need to add it to the imports array in your module definition.

[lancescape]

I can confirm it does work.... just a bit tough since the documentation shows old Angular 2.

DO NOT: @NgModule({ imports: [ FileUploadModule] .....

DO DO: @NgModule({ declarations: [FileDropDirective, FileSelectDirective] ....