AngularJs File Upload - Example

------Reference css/script--------------------------------

<script src="/Scripts/jquery-1.12.4.min.js"></script>

<link href="/Css/bootstrap.css" rel="stylesheet" />

<script src=”/Scripts/jquery-ui.min.js"></script>

<script src="/Scripts/Angular-1.7.7/angular.min.js"></script>

<script src="/Scripts/Angular-1.7.7/angular-ui.min.js"></script>

<style>

.file-input-wrapper {

width: 55%;

overflow: hidden;

position: relative;

}

.file-input-wrapper > input[type="file"] {

font-size: 150px;

position: absolute;

top: 0;

right: 0;

opacity: 0;

}

.file-input-wrapper > .btn-file-input {

display: inline-block;

width: 150px;

}

.file-input-wrapper:hover > .btn-file-input {

background-color: #aaa;

}

</style>

------------------------Html-----------------

<div class="panel-heading">

Select Files to Approve

</div>

<div class="panel-body divborder">

<div class="form-group">

<div class="file-input-wrapper">

<span class="form-group btn btn-primary btn-sm pull-right btn-file-input" role="button" tabindex="0">

<i class="glyphicon glyphicon-plus"></i>

<span>Select files...</span>

</span>

<input type="file" ng-model="fileName" multiple onchange="angular.element(this).scope().upload(this)" name="file" />

</div>

</div>

<div ng-hide="!ntpFiles.length" class="Table center">

<div class="form-group">

<table id="file_list" role="presentation" class="table table-condensed" aria-live="polite" tabindex="-1">

<thead>

<tr class="active">

<th scope="col">Filename</th>

<th scope="col">Actions</th>

</tr>

</thead>

<tbody id="files"></tbody>

<tfoot>

<tr ng-repeat="item in myFiles track by $index" class="active">

<td>

{{item.name}}

</td>

<td colspan="2">

<a class="btn btn-xs delete-record" ng-click="removeMyFiles($index)"><i class="glyphicon glyphicon-trash"></i></a>

</td>

</tr>

</tfoot>

</table>

</div>

</div>

</div>

Inside controller

--------------------------------------------------------------

//add file to repeat

$scope.upload = function (obj) {

$scope.loaded = true;

for (var i = 0; i < obj.files.length; i++) {

var file = obj.files[i];

$scope.myFiles.push(file);

$scope.loaded = false; //spinner stop

}

$scope.$apply();//event callback.

}

//remove uploded one

$scope.removeMyFiles = function (index) {

//Find the file using Index from Array.

var name = $scope.myFiles[index].name;

if ($window.confirm("Do you want to remove: " + name)) {

//Remove the item from Array using Index.

$scope.myFiles.splice(index, 1);

}

}