Angular 2 HTTP Progress bar

by

Currently (from v. 4.3.0, when using new HttpClient from @ngular/common/http) Angular provides listening to progress out of the box. You just need to create HTTPRequest object as below:

import { HttpRequest } from '@angular/common/http';
...

const req = new HttpRequest('POST', '/upload/file', file, {
  reportProgress: true,
});

And when you subscribe to to request you will get subscription called on every progress event:

http.request(req).subscribe(event => {
  // Via this API, you get access to the raw event stream.
  // Look for upload progress events.
  if (event.type === HttpEventType.UploadProgress) {
    // This is an upload progress event. Compute and show the % done:
    const percentDone = Math.round(100 * event.loaded / event.total);
    console.log(`File is ${percentDone}% uploaded.`);
  } else if (event instanceof HttpResponse) {
    console.log('File is completely uploaded!');
  }
});

More info here.

More Related Contents:

  1. What is the motivation behind the introduction of preflight CORS requests?
  2. Returning redirect as response to XHR request
  3. What does it mean when an HTTP request returns status code 0?
  4. Does an HTTP Status code of 0 have any meaning?
  5. WebSockets protocol vs HTTP
  6. Set-Cookie on Browser with Ajax Request via CORS
  7. Returning redirect as response to Ajax (fetch, XHR, etc.) request
  8. HTTP Cookies and Ajax requests over HTTPS
  9. Using the HTTP Range Header with a range specifier other than bytes?
  10. How to block external http requests? (securing AJAX calls)
  11. GET vs POST in AJAX?
  12. Who can explain this ajax code for me [closed]
  13. Keep p:dialog open when a validation error occurs after submit
  14. jQuery $.ajax(), $.post sending “OPTIONS” as REQUEST_METHOD in Firefox
  15. Getting “net::ERR_BLOCKED_BY_CLIENT” error on some AJAX calls
  16. CORS issue while making an Ajax request for oauth2 access token
  17. Ionic 2 Form goes up when keyboard shows
  18. How to encode Doctrine entities to JSON in Symfony 2.0 AJAX application?
  19. Access denied in IE 10 and 11 when ajax target is localhost
  20. How to use [(ngModel)] on div’s contenteditable in angular2?
  21. How to intercept all http requests including form submits
  22. Rendering other form by ajax causes its view state to be lost, how do I add this back?
  23. MVC5, AjaxHelper, and the Correct Scripts & Load Order
  24. Extract part of HTML document in jQuery
  25. HTML5 Video is not working with AngularJS ng-src tag
  26. Jquery ajax form submit that contains files
  27. Angular2 calling custom function after ngSwitch new view is created
  28. Cannot read property ‘native-element’ of undefined
  29. Accessing partial response using AJAX or WebSockets?
  30. Response for preflight does not have HTTP ok status in angular

Leave a Comment