Angular - POST uploaded file

Question

I m using Angular  TypeScript to send a file  along with JSON Data to a server   Below is my code   import  Component  View  NgFor  FORM DIRECTIVES  FormBuilder  ControlGroup  from  angular2 angular2   import  Http  Response  Headers  from  http http      Component   selector   file-upload      View   directives   FORM DIRECTIVES   template     lt h3 gt File Upload lt  h3 gt    lt div gt       Select file       lt input type  file   change   changeListener  event   gt   lt  div gt        export class FileUploadCmp    public file  File  public url  string  headers  Headers    constructor public http  Http        console log  file upload Initialized          set the header as multipart             this headers   new Headers        this headers set  Content-Type    multipart form-data        this url    http   localhost 8080 test        onChange file listener changeListener  event   void       this postFile  event target        send post file to server  postFile inputValue  any   void        var formData   new FormData        formData append  name    Name        formData append  file    inputValue files 0         this http post this url          formData                         headers  this headers                     How can I transform the formData to String and send it to the server  I remember in AngularJS  v1  you would use transformRequest

User · Answer

In my project   I use the XMLHttpRequest to send multipart form-data  I think it will fit you to   and the uploader  code  let xhr   new XMLHttpRequest    xhr open  POST    http   www example com rest api   true   xhr withCredentials   true  xhr send formData     Here is example   https   github com wangzilong angular2-multipartForm

User · Answer

Looking onto this issue Github - Request Upload progress handling via  angular http  angular2 http does not support file upload yet   For very basic file upload I created such service function as a workaround  using         s answer      uploadFile file File  Promise lt MyEntity gt        return new Promise  resolve  reject    gt             let xhr XMLHttpRequest   new XMLHttpRequest            xhr onreadystatechange        gt                if  xhr readyState     4                    if  xhr status     200                        resolve  lt MyEntity gt JSON parse xhr response                      else                       reject xhr response                                                       xhr open  POST   this getServiceUrl    true            let formData   new FormData            formData append  file   file  file name           xhr send formData

User · Answer

First  you have to create your own inline TS-Class  since the FormData Class is not well supported at the moment   var data       name  string    file  File          name   Name     file  inputValue files 0         Then you send it to the Server with JSON stringify data   let opts  RequestOptions   new RequestOptions    opts method   RequestMethods Post  opts headers   headers  this http post url JSON stringify data  opts

User · Answer

your http service file   import   Injectable   from   angular core   import   ActivatedRoute  Router   from   angular router   import   Http  Headers  Response  Request  RequestMethod  URLSearchParams  RequestOptions   from   angular http   import  Observable  from  rxjs Rx   import   Constants   from    constants   declare var    any    Injectable   export class HttpClient     requestUrl  string    responseData  any    handleError  any     constructor private router  Router     private http  Http     private constants  Constants             this http   http         postWithFile  url  string  postData  any  files  File           let headers   new Headers        let formData FormData   new FormData        formData append  files   files 0   files 0  name          For multiple files        for  let i   0  i  lt  files length  i                 formData append  files     files i   files i  name                 if postData        amp  amp  postData     undefined  amp  amp  postData    null         for  var property in postData              if  postData hasOwnProperty property                   formData append property  postData property                                  var returnReponse   new Promise  resolve  reject    gt          this http post this constants root dir   url  formData            headers  headers          subscribe            res   gt                this responseData   res json                resolve this responseData                          error   gt                this router navigate    login                 reject error                                    return returnReponse          call your function  Component file    onChange event        let file   event srcElement files      let postData    field1  field1   field2  field2       Put your form data variable  This is only example      this  service postWithFile this baseUrl    add-update  postData file  then result   gt            console log result               your html code    lt input type  file  class  form-control  name  documents   change   onChange  event     ngModel    stock documents   documents  ngModel  gt

User · Answer

Look at my code  but be aware  I use async await  because latest Chrome beta can read any es6 code  which gets by TypeScript with compilation  So  you must replace asyns await by  then     Input change handler           param fileInput     public psdTemplateSelectionHandler  fileInput  any       let FileList  FileList   fileInput target files       for  let i   0  length   FileList length  i  lt  length  i              this psdTemplates push FileList item i               this progressBarVisibility   true      Submit handler    public async psdTemplateUploadHandler     Promise lt any gt        let result  any       if   this psdTemplates length            return             this isSubmitted   true       this fileUploadService getObserver            subscribe progress   gt                this uploadProgress   progress                   try           result   await this fileUploadService upload this uploadRoute  this psdTemplates         catch  error            document write error             if   result  images              return             this saveUploadedTemplatesData result  images         this redirectService redirect this redirectRoute       FileUploadService  That service also stored uploading progress in progress  property  and in other places  you can subscribe on it and get new value every 500ms   import   Component   from  angular2 core   import   Injectable   from  angular2 core   import   Observable   from  rxjs Observable   import  rxjs add operator share     Injectable   export class FileUploadService           param Observable lt number gt      private progress   Observable lt number gt            type  number      private progress  number   0   private progressObserver  any   constructor          this progress    new Observable observer   gt            this progressObserver   observer                    returns  Observable lt number gt       public getObserver     Observable lt number gt        return this progress             Upload files through XMLHttpRequest        param url     param files     returns  Promise lt T gt       public upload  url  string  files  File     Promise lt any gt        return new Promise  resolve  reject    gt            let formData  FormData   new FormData                xhr  XMLHttpRequest   new XMLHttpRequest             for  let i   0  i  lt  files length  i                  formData append  uploads     files i   files i  name                      xhr onreadystatechange        gt                if  xhr readyState     4                    if  xhr status     200                        resolve JSON parse xhr response                      else                       reject xhr response                                                       FileUploadService setUploadUpdateInterval 500            xhr upload onprogress    event    gt                this progress   Math round event loaded   event total   100                this progressObserver next this progress                       xhr open  POST   url  true           xhr send formData                     Set interval for frequency with which Observable inside Promise will share data with subscribers         param interval     private static setUploadUpdateInterval  interval  number   void       setInterval      gt      interval

[angular] Angular - POST uploaded file

Examples related to angular

Examples related to typescript

Examples related to file-upload

Examples related to angular2-http