Implementing ng2-file-upload

Question

I am trying to explore trying to use ng2-file-upload but having some trouble understanding how to implement it as the readme is quite sparse. Are there anymore details that can help me get started on this. I am trying to create a demo app to upload images and save them in the server as a start.

I checked out the demo page here, http://valor-software.com/ng2-file-upload/

A few questions if anyone can help.

For the typescript page, const URL refers to an API and in the example, it is 'https://evening-anchorage-3159.herokuapp.com/api/'.
There is a file-catcher.js file in the demo/component/file-upload directory. Can anyone explain what this does and whether it is needed? Seems like an express app.

Or any other way to implement an image upload function is also welcomed. Thanks.

Ali SadeghipourKorabaslo Ali SadeghipourKorabaslo · Accepted Answer · 2016-11-24T07:51:41

Did you try upload without 3rd-Party?

Service:

export class WebService {

constructor(private http:Http) {

}

 public makeFileRequest(files:File[]):Observable<any> {
   return Observable.create(observer => {
       let formData:FormData = new FormData(),
           xhr:XMLHttpRequest = new XMLHttpRequest();

       for (let i = 0; i < files.length; i++) {
           formData.append("uploads[]", files[i], files[i].name);
       }

       xhr.onreadystatechange = () => {
           if (xhr.readyState === 4) {
               if (xhr.status === 200) {
                   observer.next(JSON.parse(xhr.response));
                   observer.complete();
               } else {
                   observer.error(xhr.response);
               }
           }
       };

       xhr.open('POST', CONSTS.baseURL + "/api/uploadFile", true);
       xhr.send(formData);
   });
}

In component:

import {Component, NgZone} from "@angular/core";
import {WebService} from "../services/services";
@Component({
 templateUrl:"./your.template.html"
})

 export class YourComponent{
 public fileEvent=null;
 private fileName;
 public validTypes = ["application/vnd.openxmlformats-officedocument.wordprocessingml.document","application/msword","application/pdf"];
 private errorFileType:boolean = false;
 private fileUploadedSuccessFully:boolean = false;
 private uploading:boolean = false;
 public uploadingMessage = "Gönder";

 constructor(public webService:WebService,public zone:NgZone){

 }
 uploadFile(event){
   if(this.validTypes.indexOf(event.target.files[0].type)!=-1){
       this.fileEvent = event;
       this.fileName = event.target.files[0].name;
       this.errorFileType = false;
   }
   else {
       this.errorFileType = true;
   }
 }
   upload(){
   this.uploading = true;
   this.uploadingMessage = "Yükleniyor";

   this.webService.makeFileRequest(this.fileEvent.target.files).subscribe((data)=>this.zone.run(()=>{
       this.fileUploadedSuccessFully = true;
       this.uploadingMessage = "Yüklendi!";
   }));
}

in html template:

 <input type="file" (change)="uploadFile($event)">
 <span (click)="uploading==false?upload():null" [ngClass]="{'upload-disable': uploading==true}">{{uploadingMessage}}</span>

Implementing ng2-file-upload

2 Answers