Angular 4 file download

Angular 4 file upload and download using TypeScript!

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 -
I hope you are enjoying with this post! Please share with you friends. Thank you!
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - https://code-sample.com and https://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions