Odtnhj

I have the following div:

<div id="main Div" ng-controller="nameController">
 <div class="jumbotron" style="width: 900px; background:transparent !important; float:left; margin-top: -75px; padding-bottom: 0px; padding-left: 40px; ">
 <form class="form-horizontal" id="uploadForm">
 <div class="form-group mb-3 d-lg-flex" style="margin-left:-50px;">
 <div class="col-md-12">
 <input id="upload" type="file" class="form-control" required="true" style="width:70%; margin-left:150px" placeholder="Upload file" file-model="uploadedFile" accept=".csv"/>
 </div>
 <div class="form-group" aria-label="file upload">
 <input type="submit" class="btn btn-primary" ng-click="doUploadFile()" value="Upload" style="margin-left:-50px;"/>
 </div>
 </div>
 </form>
 </div>
</div>

Which will call the following script on submit:

$scope.doUploadFile = function() 

 var file = $scope.uploadedFile;
 var url = "/uploadfile";

 var data = new FormData();
 data.append('uploadedfile', file);

 var config = 
 transformRequest: angular.identity,
 headers: 
 'Content-Type': undefined
 
 

 $http.post(url, data, config)
 .then(
 function(response) 
 $rootScope.nameData = response.data;
 );
;

and display this div:

<div id="alert_success" role="alert" >
 <img src="images/Success.png" width="30" height="30" style="margin-left: 5px;" alt="" hspace="5"/>
 <strong>Processed</strong> : Refer to Notes column for Status
</div>

I already have a loader, which will be loading only on page refresh.

$(window).on('load', function() 
 $('#loading').hide();
);

I instead want to apply the loader when the script is processing the function and not on windows loader.

Can someone help how to achieve this?

jQuery has APIs to handle such cases. ajaxStart/ajaxStop functions will handle before and after calls, respectivelly..

You can configure it pretty easily:

$(document)
 .ajaxStart(function () 
 //start loader
 )
 .ajaxStop(function () 
 //stop loader
 );

For more information, check the documentation for ajaxSetup() and this topic for a broader discussion