I am facing an issue with my AngularJS web application. I am trying to upload a file to a server and update ng-grid with the last uploaded file's entry once the upload is complete. Below is the HTML for my grid:
<div class="gridholder" data-ng-grid="viewmodel.gridOptions">
</div>
Here is the logic in my controller:
vm.gridOptions = {
data: 'gridData',
enableColumnResize: true,
enablePaging: true,
columnDefs: [
{ field: 'FileName', displayName: 'File Name', width: 250 }
{ field: 'UploadedDate', displayName: 'Uploaded Date'}
],
multiSelect: false,
enableSorting: true,
showFooter: true,
};
While the upload progresses, I need to display the progress and ensure the application remains responsive. However, I am experiencing a scenario where the ng-grid does not update.
When I stay on the same page during the upload and receive the response, the grid refreshes successfully. But if I navigate away from the upload page and return after the response is received, the grid does not get updated.
Below is my file upload JavaScript code:
var data = new FormData();
data.append('file', file);
var xhrRequest = Factory.uploadFileRequest('UploadFile');
xhrRequest.upload.addEventListener("progress", progressHandler, false);
xhrRequest.onreadystatechange = function (e) {
};
xhrRequest.onload = function (e) {
if (JSON.parse(e.currentTarget.responseText).Success == true) {
$timeout(function () {
$scope.LoadGrid();
//show success message here
}, 2000);
}
else
{
//show error message here
}
};
xhrRequest.onerror = function (e) {
//show error message here
};
xhrRequest.send(data);
$scope.LoadGrid = function () {
Factory.callGet("Files").then(function (d) {
$scope.gridData = d.data;
$scope.totalItems = $scope.gridData.length;
}
}, function error(err) {
//Error Message
});
}
gridData contains the value for data-ng-grid. I have already called LoadGrid method inside a $timeout, but the grid is still not refreshing with the latest data. Any assistance would be greatly appreciated.