File Upload in Angular 4

Question

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

UNMET PEER DEPENDENCY @4.1.0
UNMET PEER DEPENDENCY @4.1.0
`-- [email protected]

and upload is not working my applications throws

"Can't bind to 'uploader' since it isn't a known property of 'input'"

this is my HTML

<input type="file" ng2FileSelect [uploader]="upload" multiple formControlName="file" id="file"/>

and its Component

import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload';   
import { FileSelectDirective, FileUploader } from 'ng2-file-upload/ng2-file-
upload';

export class PersonalInfoComponent implements OnInit
{
    public upload:FileUploader= new FileUploader({url:""});
}

Parent Module

import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload';

@NgModule({

imports: [
..
....
..
FileUploadModule
],

export class RegistrationModule { }

and I didn't Import/change anything in AppModule(Grand Parent Module).

can someone help me on this please...

Answer 1

Upload images in Angular 4 without a plugin This 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 RequestOptions object.
4. In order to send formData with image content you must remove the Content-Type header.

Answer 2

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