How to return Observable from xhr

user_4207462 0
Viewed 3693

I have function like this, it just upload image with xhr request:

public uploadAvatar(avatarFile, callback) {
    return new Promise((resolve, reject) => {
      let formData: any = new FormData();
      let url = 'avatar';
      let imgArr = "avatar";
      let xhr = new XMLHttpRequest();

      formData.append(imgArr, avatarFile, avatarFile.name);
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status == 200) {
            resolve(JSON.parse(xhr.response));
            callback('success');
          } else {
            reject(xhr.response);
            callback('error');
          }
        }
      };

      xhr.open("POST", environment.baseUrl + url, true);
      xhr.setRequestHeader('Auth', this._auth.getToken());
      xhr.send(formData);
    });
  }

How can I return Observable insted Promise?

observable rxjs angular reactive-programming
4 Answers

The simple way to do as follow: 

xhrCall(url, formData, header) {
    return Observable.create(function (observer) {
      let xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status == 200) {
            observer.next(xhr);
          } else {
            observer.error(xhr);
          }
        }
      };

      xhr.open("POST", url, true);
      xhr.setRequestHeader(header.name, header.value);
      xhr.send(formData);
    });
}
user_75405730
Related