Catch the response in AngularJS function from a res.send csv file - node.js

Question

I need to catch the response (I mean checking when the response from a NodeJS function return to the client, not like an error) from a NodeJS function.
When the button is clicked, a function with a form starts and NodeJS, after a query, returns a csv file. The problem is that the query is complex and it requires 1+ minutes to complete.
I need to make a loading spinner start when the button is clicked, and it should stop when the CSV is returning from the function. Any clue on how can I do that? Thanks in advance.
HTML form
<form name="csvForm" ng-submit="download(csvForm.$valid)">
<div class="panel-body">
<div class="row">
<div class="form-group col-sm-4">
<label class="control-label">Concessionaria<span ng-if="userProfileID != 1">*</span></label>
<select class="form-control" ng-model="Dealer"
ng-options="dealer.ID as dealer.Name for dealer in dealers "
ng-required="userProfileID != 1">
<option value=""></option>
</select>
</div>
<div class="form-group col-sm-4">
<label class="control-label">Anno*</label>
<select class="form-control" ng-model="Year"
ng-options="y as y for y in syears" required>
<option value=""></option>
</select>
</div>
</div>
</div>
<div class="form-group col-sm-4 col-sm-offset-4" style="margin-top:20px">
<button name="submitBtn" class="btn btn-lg btn-primary btn-block" type="submit" >Scarica CSV</button>
</div>
</form>
Angular
$scope.download = function () {
var form = document.createElement('form');
form.action = apihost + "/queryReport/avanzEvaluation";
form.method = 'POST';
form.target = '_blank';
form.style.display = 'none';
var jsonData = {
dealer: $scope.Dealer,
year: $scope.Year
};
var inputJson = document.createElement('input');
inputJson.type = 'text';
inputJson.name = 'data';
inputJson.value = JSON.stringify(jsonData);
var submit = document.createElement('input');
submit.type = 'submit';
submit.id = 'submitProject';
form.appendChild(inputJson);
form.appendChild(submit);
document.body.appendChild(form);
//Send form.
form.submit();
document.body.removeChild(form);
};
NodeJS
router.post('/avanzEvaluation', function (req, res) {
return new Promise(function(resolve,reject) {
//Not the real query, just an example
var sql = "SELECT * FROM Table ";
return models.sequelize.query(sql, {replacements: replacements, type: models.sequelize.QueryTypes.SELECT })
.then(function (results) {
const Json2csvParser = require('json2csv').Parser;
//Not real fields, just examples
const fields = ["Field1", "Field2", "Field3", "Field4",];
const opts = { fields };
try {
const parser = new Json2csvParser(opts);
const csv = parser.parse(results);
var filename = ("avanzValutazioni.csv");
res.header("Content-Disposition","attachment;filename=" + filename);
res.setHeader('content-type', 'text/csv');
res.send(iconv.encode(csv, 'iso-8859-1'));
}
catch (err) {
console.error(err);
}
})
.catch(function (err) {
console.log(err);
});
})
});

Answer 1

To start and stop a spinner using the http service, use the .finally method of the $http promise:
$scope.spinner = true;
var promise = $http.post(url, data);
promise.finally(function() {
$scope.spinner = false;
});
<div ng-if="spinner">
<!-- Put spinner here -->
</div>
For more information, see
AngularJS $q Service API Reference - The Promise API

Answer 2

I figured out how to do it, thanks to #georgeawg too!
I resolved by returning a json with the filename and complete csv (csv format) without downloading it from the NodeJS function to the front end. Then I manipulate the result in front end to trigger the csv download with the result.
AngularJS
$scope.download = function () {
//Spinner
usSpinnerService.spin('spinner-1');
//Custom data from the Form, sent as a JSON
var jsonData = {
year: $scope.Year
};
if($scope.Dealer) {
jsonData.dealer = $scope.Dealer;
}
//I've could have done this with a options variable, but i prefer it inline
$http.post(apihost + "/queryReport/avanzEvaluation_TEST", {data: jsonData}, {headers: {'Content-Type': 'application/json'}})
.success(function (result) {
//If the query returns a non-empty csv
if(result.csv.length > 0) {
usSpinnerService.stop('spinner-1');
//This if-else is used to make it work on Edge too
if (window.navigator.msSaveOrOpenBlob) {
var blob = new Blob([result.csv]);
window.navigator.msSaveOrOpenBlob(blob, result.filename);
}
else {
var a = document.createElement("a");
a.href = "data:attachment/csv," + encodeURIComponent(result.csv);
a.target = "_blank";
a.download = result.filename;
document.body.appendChild(a);
a.click();
}
}
//Otherwise I show an error with the module Notification
else {
Notification.error("Non è stato possibile eseguire il download del file CSV.");
}
});
}
NodeJS
router.post('/avanzEvaluation_TEST', function (req, res) {
return new Promise(function(resolve,reject) {
//Not the real query, just an example
var sql = "SELECT * FROM Table ";
return models.sequelize.query(sql, {replacements: replacements, type: models.sequelize.QueryTypes.SELECT })
.then(function (results) {
const Json2csvParser = require('json2csv').Parser;
//Not real fields, just examples
const fields = ["Field1", "Field2", "Field3", "Field4",];
const opts = { fields };
try {
const parser = new Json2csvParser(opts);
const csv = parser.parse(results);
var filename = ("avanzValutazioni.csv");
res.json({filename: filename, csv: csv});
}
catch (err) {
console.error(err);
}
})
.catch(function (err) {
console.log(err);
});
})
});