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 –

It might help you to upload and download files in Angular 4 -

· http://www.advancesharp.com/blog/1218/angular-4-upload-files-with-data-and-web-api-by-drag-drop

I hope you are enjoying with this post! Please share with you friends. Thank you!

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2