angular $http $watch for progress during file uploading

Question

I have a function like this:

$scope.fileUpload = function (files) {
                angular.forEach(files, function () {
                    var fd = new FormData();
                    fd.append('files[]', files[0]);

                    $http.post('/my-url', fd, {
                        transformRequest: angular.identity,
                        headers: {
                            'Content-Type': undefined}
                    }).then(function (data) {
                        console.log(data);
                    });
                });
            };

and template:

<input type="file"
               name="files[]"
               id="fileUploaderButton_contentFormFiles"
               onchange="angular.element(this).scope().fileUpload(files)"
               multiple>
<div class="progress" id="fileUploaderProgressbar_contentFormFiles">
    <div class="progress-bar progress-bar-striped active"
         role="progressbar"
         aria-valuenow="{{progress}}"
         aria-valuemin="0"
         aria-valuemax="100"
         style="min-width: 2em; width: {{progress}}%">
        <span>{{progress}}%</span>
    </div>
</div>

How can I $watch for for transferred value (bytes) of an uploading file so I can update {{progress}} in the progress bar during $http request (using native angular features)? Thanks in advance.

stackoverflow.com/questions/13591345/… Here is a working example of what u looking for — Yerken
– Yerken, Commented Feb 21, 2016 at 2:14

VivekDev · Accepted Answer · 2017-01-21 05:38:47Z

2

Not the answer you want but your approach is wrong

You should be using ng-file-upload which is the standard angular approach to this and supports upload progress tracking

edited Jan 21, 2017 at 5:38

VivekDev

26.1k33 gold badges168 silver badges234 bronze badges

answered Feb 21, 2016 at 1:20

danday74

58k56 gold badges273 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yerken Over a year ago

Since when ng-file-upload is a standard approach?

VivekDev Over a year ago

Yes, ng-file-upload has many features. Do take a look.

max · Accepted Answer · 2016-02-21 13:01:03Z

1

thank you all very much for your advices. My solution is to use XMLHttpRequest instead of $http service:

$scope.fileUpload = function (files) {
                angular.forEach(files, function () {
                    var fd = new FormData();
                    fd.append('files[]', files[0]);

                    var xhr = new XMLHttpRequest();

                    xhr.upload.onprogress = function (event) {
                        $scope.progress = Math.floor((event.loaded / event.total) * 100);
                        console.log(event.loaded + ' / ' + event.total);
                    }

                    xhr.open("POST", '/my-url', true);
                    xhr.send(fd);
                });
            };

answered Feb 21, 2016 at 13:01

max

65211 silver badges29 bronze badges

1 Comment

danday74 Over a year ago

This is very non angular but if u don't care the. Go for it

VivekDev · Accepted Answer · 2017-01-21 05:15:50Z

You can use the ng-file-upload directive. It supports drag&drop, file progress/abort and file upload for non-HTML5 browsers.

HTML:

<div ng-controller="MyCtrl">
  <input type="file" ng-file-select="onFileSelect($files)" multiple>
</div>

JS:

//make sure you inject angularfileupload
angular.module('myApp', ['angularFileUpload']);

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
  $scope.onFileSelect = function($files) {
    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {
      var $file = $files[i];
      $upload.upload({
        url: 'my/upload/url',
        file: $file,
        progress: function(e){}
      }).then(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      }); 
    }
  }
}];

Collectives™ on Stack Overflow

angular $http $watch for progress during file uploading

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related