Search This Blog

Friday, June 21, 2019

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);
}

}

No comments:

Post a Comment