Angular.js Consuming Upload.progress event in a controller

Question

I have a code that uploads documents in the controller, I wanted it to be moved to a service, so that other controllers can consume it.

"use strict";
angular.module('myApp')
.service('uploadDocumentService', ['Upload', function (Upload) {
    this.UploadDocument = function ($file, data) {

        Upload.upload({
            url: '/uploadDocuments',
            file: $file,
            data: data
        }).progress(function (evt) {
            var progressReport = {};
            progressReport.progressVisible = true;
            progressReport.percentage = Math.round(evt.loaded / evt.total * 100);
            return progressReport;
        }).success(function (data, status, headers, config) {
            var fileUploaded = {};
            fileUploaded.id = data.id;
            fileUploaded.name = data.fileName;
            return fileUploaded;
        });
    }

}]);

I am unable to capture the .progress event in my controller

 uploadDocumentService.UploadDocument($file, 'Path')
                .progress(function (progressReport) {
                  //Some code
                }).success(function (data) {
                  //Some code

            });

Keep getting the error Cannot read property 'progress' of undefined at m.$scope.uploadDocuments Any tips on how to solve this problem, do I need to register the progress event in the service?

Please confirm whether your controller is having the service - uploadDocumentService..angular.module('myApp').controller("MyCtrl", function($scope, uploadDocumentService) — Naga Sai A
– Naga Sai A, Commented Jul 18, 2016 at 5:39
i think uploadDocumentService param is missing in your controller function which is causing that undefined error.. Hope this works for you :) — Naga Sai A
– Naga Sai A, Commented Jul 18, 2016 at 5:40

Rahul Ganguly · Accepted Answer · 2016-07-18 05:49:18Z

Controller code

"use strict";
angular.module('myApp')
.controller('controller', ['$scope', '$http',  'Upload', 'uploadDocumentService', function ($scope, $http, Upload, uploadDocumentService) {
 $scope.uploadDocuments = function ($files) {
        $scope.progressVisible = false;
        for (var i = 0; i < $files.length; i++) {
            var $file = $files[i];
            uploadDocumentService.UploadDocument($file, 'path')
                .progress(function (evt) {
                    $scope.progressVisible = true;
                    $scope.percentage = Math.round(evt.loaded / evt.total * 100);

                }).success(function (data) {
                var fileUploaded = {};
                fileUploaded.id = data.id;
                fileUploaded.name = data.fileName;
                $scope.filesUploaded.push(fileUploaded);
                $scope.isFileUploaded = true;                   

            });
}]);

Rahul Ganguly · Accepted Answer · 2016-07-18 06:12:39Z

1

A colleague pointed out the mistake, the fix is as below, return was missing in the statement Upload.upload

"use strict";
angular.module('myApp')
.service('uploadDocumentService', ['Upload', function (Upload) {
    this.UploadDocument = function ($file, data) {
        return Upload.upload({
            url: '/uploadDocuments',
            file: $file,
            data: data
        }).progress(function (evt) {

        }).success(function (data, status, headers, config) {
        });
    }

}]);

answered Jul 18, 2016 at 6:12

Rahul Ganguly

2,1565 gold badges26 silver badges39 bronze badges

Comments

Naga Sai A · Accepted Answer · 2016-07-18 05:50:01Z

0

To achieve your expected result,add uploadDocumentService param in your controller function.

angular.module('myApp').controller("controller", function($scope, uploadDocumentService)

edited Jul 18, 2016 at 5:50

answered Jul 18, 2016 at 5:44

Naga Sai A

11k1 gold badge24 silver badges41 bronze badges

4 Comments

Naga Sai A Over a year ago

@Rahul Ganguly, if my answer helped your question, please vote or mark it as answered :)

Rahul Ganguly Over a year ago

This is present in my controller,

Naga Sai A Over a year ago

@RahulGanguly, please share your controller code as well

Rahul Ganguly Over a year ago

thanks for the help, A colleague pointed out that I had missed on a return statement, the code in the service should have been like this return Upload.upload({ })

Collectives™ on Stack Overflow

Angular.js Consuming Upload.progress event in a controller

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related