Angular2 Image Upload to Django Rest Framework with Form Data

UploadService.ts

@Injectable()
export class UploadService {
  /**
   * @param Observable<number>
   */
  private progress$: Observable<number>;

  /**
   * @type {number}
   */
  private progress: number = 0;

  private progressObserver: any;

  constructor() {
    this.progress$ = new Observable(observer => {
      this.progressObserver = observer
    });
  }

  /**
   * @returns {Observable<number>}
   */
  public getObserver(): Observable<number> {
    return this.progress$;
  }

  /**
   * Upload files through XMLHttpRequest
   *
   * @param url
   * @param files
   * @returns {Promise<T>}
   */
  public upload(url: string, formdata: FormData,headers:string): Promise<any> {
    return new Promise((resolve, reject) => {

      let xhr: XMLHttpRequest = new XMLHttpRequest();


      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            console.log(xhr.response);
            resolve(JSON.parse(xhr.response));

          } else {
            console.log(xhr.response);
            reject(xhr.response);
          }
        }
      };

      UploadService.setUploadUpdateInterval(500);

      xhr.upload.onprogress = (event) => {
        this.progress = Math.round(event.loaded / event.total * 100);

        this.progressObserver.next(this.progress);
      };

      xhr.open('PATCH', url, true);
      xhr.setRequestHeader("Authorization",headers);
      xhr.send(formdata);
      console.log("sent");
    });
  }

  /**
   * Set interval for frequency with which Observable inside Promise will share data with subscribers.
   *
   * @param interval
   */
  private static setUploadUpdateInterval(interval: number): void {
    setInterval(() => {
    }, interval);
  }
}