CODEWITHSUNDEEP
angularjsangular-servicesangular-controller
Rahul Ganguly
Rahul Ganguly

Reputation: 2106

Angular.js Consuming Upload.progress event in a controller

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?

Upvotes: 1

Views: 184

Answers (3)

Rahul Ganguly
Rahul Ganguly

Reputation: 2106

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) {
        });
    }

}]);

Upvotes: 1

Naga Sai A
Naga Sai A

Reputation: 10975

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

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

Upvotes: 0

Rahul Ganguly
Rahul Ganguly

Reputation: 2106

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;                   

            });
}]);

Upvotes: 1

Related Questions