Angularjs $http and progress bar

You can use Angular Loading Bar. It works automatically for $http requests and does not need any setup except adding it as app dependency.

angular.module('app', ['angular-loading-bar']); // that's all

I would highly recommend ng-progress. This handles multiple requests and basically shows a neat little progress bar for all http activity.

http://victorbjelkholm.github.io/ngProgress/

You can solve this by hiding/showing a loadingbar. Start showing the loadingbar once the upload starts, and remove the loadingbar when the upload is done (in the success handler from the $http request).

I created a simple jsfiddle for you to show you an example.
I'm using $timeout to simulate a $http request.

Html markup:

<div ng-controller="MyCtrl">    <!-- this can be an image if you want -->    <p ng-show="loading">...LOADING...</p>    <!-- Showing the status -->    <p ng-hide="loading">{{status}}</p>    <button type="button" ng-click="upload()">Do $http request</button></div>

Js Controller:

function MyCtrl($scope, $timeout) {    $scope.status = 'Not started';    $scope.loading = false;    $scope.upload = function() {        $scope.loading = true;        // Simulating a http request with a timeout        $timeout(function(){             $scope.status = "Finished";            $scope.loading = false;        },3000);    }}

For a demonstration of how this works, see this fiddle.

Update

By clarification in the comments, you want to be able to track the progress on the upload by percentage. eg. How many % til the upload is finished

You should check out this SO post where this has already been discussed.

From the accepted answer:

I don't think $http.post() can be used for this. As for client-side, it should work with an HTML5 browser, but you'll probably have to create your own XMLHttpRequest object and onprogress listener. See AngularJS: tracking status of each file being uploaded simultaneously for ideas.