File Upload in Angular 4

Upload images in Angular 4 without a pluginThis is the article that might be worth trying.Upload images in Angular 4 without a plugin

It emphasize on these points:

1. Using the .request() method instead of .post
2. Sending formData straight into the body.
3. Customizing header items and constructing a new RequestOptionsobject.
4. In order to send formData with image content you must remove the Content-Type header.

I don't think we need some extra libraries

onFileChange(event){   let files = event.target.files;    this.saveFiles(files);    }@HostListener('dragover', ['$event']) onDragOver(event) {    this.dragAreaClass = "droparea";    event.preventDefault();}@HostListener('dragenter', ['$event']) onDragEnter(event) {    this.dragAreaClass = "droparea";    event.preventDefault();}@HostListener('dragend', ['$event']) onDragEnd(event) {    this.dragAreaClass = "dragarea";    event.preventDefault();}@HostListener('dragleave', ['$event']) onDragLeave(event) {    this.dragAreaClass = "dragarea";    event.preventDefault();}@HostListener('drop', ['$event']) onDrop(event) {       this.dragAreaClass = "dragarea";               event.preventDefault();    event.stopPropagation();    var files = event.dataTransfer.files;    this.saveFiles(files);}

And now we are ready to upload files with drag and drop as well as by clicking the link button and upload extra data with files.

See the complete article here Angular 4 upload files with data and web api by drag & drop

For common solution is to create new module like shared module. You just need create shared module likethis and import shared module in app.module file

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 { }

just import share.module in your app.module like this.

import { NgModule } from '@angular/core';import { SharedModule} from '../shared/shared.module';@NgModule({    imports: [SharedModule],    declarations: [],    exports :[],   })export class AppModule { }

take a look on lazy loading in angular 4