Example 1 - We will need to create shared module and this
shared module is import in AppModule file i.e.
Shared.module.ts
-
import
{ NgModule } from
'@angular/core';
import
{ FormsModule } from
'@angular/forms';
import
{ FileSelectDirective,
FileDropDirective
} from 'ng2-file-upload';
import
{ FileUploadModule } from
'ng2-file-upload/ng2-file-upload';
@NgModule({
imports: [ FileUploadModule],
declarations: [ ],
exports :[ FileSelectDirective,
FileDropDirective,
FormsModule,
FileUploadModule],
})
export
class SharedModule
{ }
Import share.Module
in the AppModule i.e.
import
{ NgModule } from
'@angular/core';
import
{ SharedModule} from
'../shared/shared.module';
@NgModule({
imports: [SharedModule],
declarations: [],
exports :[],
})
export
class AppModule
{ }
Example
2
- We can also use ng2-file-upload in the angular 4 apps -
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 />
It might help you to upload and download files in
Angular 4 -