How can I show progress of multiple file upload before sending to the server

[CorwinMoyne]

I need to allow the user to upload up to 8 images. I cannot send the images directly to the server on file select as the images are only part of the POST body so when the files are selected they are added to a json array then when the user submits the form the data along with the images is sent the the server. This works as expected.

The problem I am having is if the user selects 8 images, there is delay before the images are rendered as thumbnails. I would like to add a spinner whilst this in in progress. I can see the requests for the images in Chrome's network tab. How can I find out when these requests start and finish so I can start and stop and spinner?

In other words, how can I show spinner when xhr.upload starts and finishes?

[alok-agarwal]

@CorwinMoyne Could you figure that out?

What I tried is to set the loaders even before the upload file POST requests are sent and just after the files are validated. That does not work either. It still does not show up till the request is in pending state.

` function uploadVideoFiles (files,invalidFiles) {

$scope.preview = []; 
$scope.errorFiles = { hasError : false, name : '', $error : '', files : [] }; 

if (files && files.length && invalidFiles.length === 0) { 
    //Set the loader for all files uploaded before image POST 
    for(var i = 0; i < files.length; i++){ 
        $scope.preview[i]={}; 
        $scope.preview[i].loading = true; 
    }

    angular.forEach(files, function (file, key) { 
        uploadVideoFromDevice.upload = Upload.upload({ 
            url: '', 
            data: { file: file }, 
            headers: { } 
        }).progress(function (evt) { 
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total); 
            if(progressPercentage < 100) { 
                $scope.preview[key].progress = progressPercentage; 
            } 

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

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

        }); 
    }); 
}else{
    // Handle Invalid files 
} 

} `