[XMLHttpRequest] onprogress callback

[jamesfzhang]

XMLHttpRequest currently doesn't support the onprogress callback for non-uploads. Any other way to estimate the progress of a GET request?

[mkonicek]

Good question! I don't think there is one currently.

[mkonicek]

@facebook-github-bot answered

[facebook-github-bot]

Closing this issue as @mkonicek says the question asked has been answered. Please help us by asking questions on StackOverflow. StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.

[norbertsongin]

Is there any update on this?
According to this example xhr.upload.onprogress callback can be defined but the problem is that xhr.upload is left undefined.

[ryanlntn]

I'm seeing the same thing. Not really sure how to work around it.

[ahanriat]

Having the same issue, any update ?

[ryanlntn]

@ahanriat There were a lot of updates to xhr in the 0.26 release. I'm in the process of updating right now and hoping that will fix it.

If that doesn't work you could try my workaround: #6986

[ahanriat]

Thanks for the heads up @ryanlntn !! I'll try it :)

[GeoffreyPlitt]

I'm on RN=0.42 and using XHR with a Content-Length set before uploading begins. I'm seeing the progress events, but no bytesSent or length or anything else that I can use to compute a progress%. Anybody else have luck with this?

[butchmarshall]

I'm also seeing total, but no loaded progress on both RN=0.42 and RN=0.46.4

[butchmarshall]

I have a workaround for it at least.

Created a pull request here

In Libraries/Network/XMLHttpRequest.js

Change:

  __didReceiveIncrementalData(
    requestId: number,
    responseText: string,
    progress: number,
    total: number
  ) {
    if (requestId !== this._requestId) {
      return;
    }
    if (!this._response) {
      this._response = responseText;
    } else {
      this._response += responseText;
    }

    XMLHttpRequest._interceptor && XMLHttpRequest._interceptor.dataReceived(
      requestId,
      responseText);

    this.setReadyState(this.LOADING);
    this.__didReceiveDataProgress(requestId, progress, total);
  }

To

  __didReceiveIncrementalData(
    requestId: number,
    responseText: string,
    progress: number,
    total: number
  ) {
    if (requestId !== this._requestId) {
      return;
    }
    if (!this._response) {
      this._response = responseText;
    } else {
      this._response += responseText;
    }
    progress = this._response.length;

    XMLHttpRequest._interceptor && XMLHttpRequest._interceptor.dataReceived(
      requestId,
      responseText);

    this.setReadyState(this.LOADING);
    this.__didReceiveDataProgress(requestId, progress, total);
  }