rxjs - Angular 2 & Vanilla JS : Wait for images to load before making http calls -

i using service upload images on server. here :

addpictures(files: file[], folder: string): observable<parse.object[]> {   let haserror = false;   (let file of files) {     let [type, ext] = file.type.split('/');     if (type.tolowercase() !== 'image' || !environment.imgexts.includes(ext.tolowercase())) { haserror = true; }   }   if (haserror) { return observable.throw('invalid extension detected'); }    let observables: observable<parse.object>[] = [];    (let file of files) {     // size     let img = new image();     img.onload = () => {       // create parse document       let parseimg = { url: '', type: file.type, width: img.width, height: img.height };       // upload on amazon , add db       observables.push(this.addpicture(parseimg, file, folder));       console.log('pushing array');     }     img.src = window.url.createobjecturl(file);   }   console.log('forkjoin');   return observable.forkjoin(observables); } 

all functions works great. problem i'm facing when use img.onload, forkjoin doesn't wait before firing. wait images load, trigger thr forkjoin send them all.

i have tried condition (when last item pushed array, trigger forkjoin), subject, problem component returns error along lines of cannot read property 'subscribe' of undefined.

edit here code thr fromevent :

addpictures(files: file[], folder: string): observable<parse.object[]> {   let haserror = false;   (let file of files) {     let [type, ext] = file.type.split('/');     if (type.tolowercase() !== 'image' || !environment.imgexts.includes(ext.tolowercase())) { haserror = true; }   }   if (haserror) { return observable.throw('invalid extension detected'); }    let observables: observable<parse.object>[] = [];    (let file of files) {     // size     let img = this.fromimgevent(file, window.url.createobjecturl(file), folder);     observables.push(img);   }   console.log('forkjoin');   return observable.forkjoin(observables); }  fromimgevent(file: file, url: string, folder: string) {   return observable.create(observer => {     let img = new image();     img.onload = () => {       // create parse document       let parseimg = { url: '', type: file.type, width: img.width, height: img.height };       // upload on amazon , add db       observer.next(this.addpicture(parseimg, file, folder));       observer.complete();     }     img.src = url;   }); } 

you use example observable.fromevent or create observable loading image so:

addpictures(files: file[], folder: string): observable<parse.object[]> {    let haserror = false;    let data$ = files.map(file => {      let [type, ext] = file.type.split('/');      if (type.tolowercase() !== 'image' || !environment.imgexts.includes(ext.tolowercase())) {         haserror = true;      }      return observable.create(observer => {          let image = new image();          image.src = window.url.createobjecturl(file);          image.onload = (e) => {              let parsedimage = { url: '', type: file.type, width: image.width, height: image.height };              observer.next({ parsedimage, file });              observer.complete();          };      });    };    if (haserror) {       return observable.throw('invalid extension detected');    }    return observable      .forkjoin(data$)      .toarray()      .switchmap(([parseddata]) => {          return observable.forkjoin(              parseddata.map(data => {                  return this.addpicture(data.parsedimage, data.file, folder)              })          );      });  }