typescript - Observable and xhr.upload.onprogress event -

i have 2 services.

1) uploadservice - send file throug ajax server, , , store progress value (inside xhr.upload.onprogress event handler)

2) someotherservice worked dom, progress value first service, displayed on bootstrap progressbar.

because, xhr.upload.onprogress asynchronious - use observable in first service:

constructor () {     this.progress$ = new observable(observer => {         this.progressobserver = observer     }).share(); }  private makefilerequest (url: string, params: string[], files: file[]): promise<any> {     return new promise((resolve, reject) => {         let formdata: formdata = new formdata(),             xhr: xmlhttprequest = new xmlhttprequest();          (let = 0; < files.length; i++) {             formdata.append("uploads[]", files[i], files[i].name);         }          xhr.onreadystatechange = () => {             if (xhr.readystate === 4) {                 if (xhr.status === 200) {                     resolve(json.parse(xhr.response));                 } else {                     reject(xhr.response);                 }             }         };          xhr.upload.onprogress = (event) => {             this.progress = math.round(event.loaded / event.total * 100);              this.progressobserver.next(this.progress);         };          xhr.open('post', url, true);         xhr.send(formdata);     }); } 

insise second service, subscribe on observer:

this.fileuploadservice.progress$.subscribe(progress => {     this.uploadprogress = progress });  this.fileuploadservice.upload('/api/upload-file', [], this.file); 

now problem:

that code not work. in second service observed value once, on 100%.

but if insert (yes, empty callback body)

setinterval(() => { }, 500); 

inside makefilerequest method - progress value inside second service every 500 milliseconds.

private makefilerequest (url: string, params: string[], files: file[]): promise<any> {     return new promise((resolve, reject) => {         let formdata: formdata = new formdata(),             xhr: xmlhttprequest = new xmlhttprequest();          (let = 0; < files.length; i++) {             formdata.append("uploads[]", files[i], files[i].name);         }          xhr.onreadystatechange = () => {             if (xhr.readystate === 4) {                 if (xhr.status === 200) {                     resolve(json.parse(xhr.response));                 } else {                     reject(xhr.response);                 }             }         };          setinterval(() => {         }, 500);          xhr.upload.onprogress = (event) => {             this.progress = math.round(event.loaded / event.total * 100);              this.progressobserver.next(this.progress);         };          xhr.open('post', url, true);         xhr.send(formdata);     }); } 

what that? why happened? how can correct use observable onprogress event without setinterval?

upd: after thierry templier answer inside

this.service.progress$.subscribe( data => {      console.log('progress = '+data);  });  

i got correct values, values not updated inside template dynamically, on 100% again.

i don't have complete code it's difficult give precise answer.

the fact tell "in second service observed value once, on 100%." makes me think should related use of promises. matter of fact, promises can resolved or rejected once. there no support of multiple events contrary observables.

if can post plunkr code, i'll able debug should provide more precise answer.

edit

i created plunkr (http://plnkr.co/edit/ozzqbxiorjqw15brdfrg?p=preview) test code , seems works. changing promise observable, more progress hints.

makefilerequest(url: string, params: string[], files: file[]): observable> {   return observable.create(observer => {     let formdata: formdata = new formdata(),         xhr: xmlhttprequest = new xmlhttprequest();      (let = 0; < 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.upload.onprogress = (event) => {         this.progress = math.round(event.loaded / event.total * 100);          this.progressobserver.next(this.progress);     };      xhr.open('post', url, true);     xhr.send(formdata);   }); } 

here traces had:

app.component.ts:18 progress = 21 app.component.ts:18 progress = 44 app.component.ts:18 progress = 71 app.component.ts:18 progress = 100 

with promise, 2 traces