real time progress bar in angularJs with jquery

Question

I opened link : Change bootstrap progress-bar width from angularjs

I'm trying to show progress-bar with percent while uploading the file, it should show actual uploading time in AngularJS.

Answer 1

forget jQuery - it doesn't always play nicely with Angular since jQuery may update the DOM outside the Angular domain and then you have to start worrying about binding data to the view (which is done naturally with angular modules).

I recommend using ng-file-upload which provides progress information during upload.

I would also recommend using ui-bootstrap which has a nice progress bar to use. Just update the progress bar % info with the information given to you by ng-file-upload.

Hope this helps. Heres how to get % progress

$scope.upload = function (file) {
    Upload.upload({
        url: 'upload/url',
        data: {file: file, 'username': $scope.username}
    }).then(function (resp) {
        console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
    }, function (resp) {
        console.log('Error status: ' + resp.status);
    }, function (evt) {
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
        console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
    });
    };