Handle upload progress events using AngularJS (1.5.5+) about angular-material-fileinput HOT 3 OPEN

function onUploadFileProgress(fileObj, event) {
    fileObj.uploadFileProgress = ((event.loaded / event.total) * 100);
    console.log('UploadProgress -> ' + fileObj.key + ' : ' +
        fileObj.uploadFileProgress
    );
}

/**
 * Upload Files
 */
function uploadFiles() {
    angular.forEach($scope.files, function(fileObj) {
        var UploadFileAPI = $resource(
            vm.uploadPath, {},
            {
                upload: {
                    method: 'POST',
                    isArray: false,
                    uploadEventHandlers: {
                        progress: function(event) {
                            onUploadFileProgress(fileObj, event);
                        }
                    },
                    transformRequest: angular.identity,
                    headers: {
                        'Content-Type': undefined,
                        'FileName': fileObj.lfFile.name,
                        'FileSize': fileObj.lfFile.size
                    }
                }
            }
        );

        var uploadData = new FormData();
        uploadData.append('file', fileObj.lfFile);
        var fileData = angular.toJson({
            'FileName': fileObj.lfFile.name,
            'FileSize': fileObj.lfFile.size
        });
        uploadData.append('fileData', fileData)

        var toast = $mdToast.simple()
            .position('top right')
            .hideDelay(1000);

        UploadFileAPI.upload(uploadData).$promise.then(function(response) {
            if (response.file.FileID) {
                toast.textContent(response.file.DisplayFileName + ' Uploaded Successfully!');
                $mdToast.show(toast);
            } else {
                toast.textContent('File upload Failed!!!');
                $mdToast.show(toast);
            }
        }, function() {
            toast.textContent('File upload Failed!!!');
            $mdToast.show(toast);
        });
    });
}

var lfId = genLfObjId();

var lfFileObj = {
    "key":lfId,
    "lfFile":lfFile,
    "lfFileName":lfFileName,
    "lfDataUrl":lfDataUrl,
    "counterId" : 'counter'+lfId
};

var elPreview = angular.element(tplPreview);
var fileProgressId = lfFileObj.key + '-uploadFileProgress';
lfFileObj.uploadFileProgress = 0;
scope[lfFileObj.counterId] = 0;
$interval(function() {
    scope[lfFileObj.counterId]  = lfFileObj.uploadFileProgress;
    scope.$digest();
}, 100, 0, false);
var elFooter = angular.element('<div class="lf-ng-md-file-input-frame-footer"><md-progress-linear id="' + fileProgressId + '" md-mode="determinate" value="{{'+lfFileObj.counterId+'}}"></md-progress-linear><div class="lf-ng-md-file-input-frame-caption">' + lfFile.name + '</div></div>');