multiplefileUpload using angular

by raju k

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<div class="form-group" ng-app="myapp" ng-controller="uploadcontroller">
	<label class="control-label col-sm-3">Import File 
		<span class="error">*</span>
	</label>
	<div class="col-lg-6 col-sm-6 col-12">
		<label class="btn btn-primary">
			<input type="file"  id="f" accept=".txt,.csv,.jmx " multiple onchange="angular.element(this).scope().getFileDetails(this);this.value=null;" />
		</label>
		<br><br>
		<button  class="btn btn-success" ng-click="submitdata()">  submit </button>
	</div>
</div>

JavaScript

var app = angular.module("myapp", []);

	app.controller("uploadcontroller", 
	   function uploadcontrollerFun($scope,$http)

	   {

	    $scope.files = [];
	    $scope.getFileDetails = function(e) {
	     $scope.$apply(function() {
	      for (var i = 0; i < e.files.length; i++) {
	       var isFileAvailable = false;
	       console.log("File Name  " + e.files[i].name);
	       for (var j = 0; j < $scope.files.length; j++) {
	        if ($scope.files[j].name === e.files[i].name) {
	         isFileAvailable = true;
	         break;
	        }
	       }
	       if (!isFileAvailable) {
	        $scope.files.push(e.files[i]);
	       } else {
	        alert("file is already available ::" + e.files[i].name)
	       }
	      }
	     });
	    }
	    $scope.submitdata = function() {
	     var data = new FormData();
	     for (var i in $scope.files) {
	      data.append("uploadFile[" + i + "]", $scope.files[i]);
	     }
       console.log("data",data);
var targetRequestPath ='https://localhost:8443/Application/UploadScenarioFiles';
       //'./UploadScenarioFiles';// controller url 
	   $http({
	       method: 'POST',
	       url: targetRequestPath,
	       headers: {
	        'Content-Type': undefined
	       },
	       data: data
	      }).then(function(response) {
	       console.log('Response Data : ', response.data);
	       callback(response.data);
	      })


	    }
    });