CODEWITHSUNDEEP
angularjsangular-http
DaCh
DaCh

Reputation: 931

Showing percent of upload of api angular

So I'm sending some data with a $http.post in angular like

 $http.post('/api/FileBrowser/UploadedFiles/',
                              JSON.stringify(dummyobj),
                              {
                                  headers: {
                                      'Content-Type': 'application/json'
                                  }
                              }
                          ).success(function (data2) {

                          }).error(function (data, status, headers, config) {

                          });

So now i want to try and show how many percent of the upload is done, I know the size of the upload post call. so i would like to find something like a callback method that return how many send bytes,.

This should be doable since a browser can show this. any one how this can be done? Thanks

Upvotes: 1

Views: 554

Answers (1)

danday74
danday74

Reputation: 57036

use ng-file-upload

i've used it before for large company in production - works great - excellent when used in conjuntion with ui.bootstrap progress bars

https://github.com/danialfarid/ng-file-upload

https://angular-ui.github.io/bootstrap/#/progressbar

both are well respect libraries within the Angular community

code from ng-file-upload site

//inject directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {
// upload later on form submit or something similar
$scope.submit = function() {
  if ($scope.form.file.$valid && $scope.file) {
    $scope.upload($scope.file);
  }
};

// upload on file select or drop
$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);
    });
};
// for multiple files:
$scope.uploadFiles = function (files) {
  if (files && files.length) {
    for (var i = 0; i < files.length; i++) {
      Upload.upload({..., data: {file: files[i]}, ...})...;
    }
    // or send them all together for HTML5 browsers:
    Upload.upload({..., data: {file: files}, ...})...;
  }
}
}]);

Upvotes: 2

Related Questions