<input type="file" id="file" name="file" ng-show="attachFile" />
<button type="button" ng-model="attach" ng-click="add()">Attach</button>
<div class="panel panel-default" ng-show="displayAttachments">
<div class="panel-heading">
<h3 class="panel-title">Attachments</h3>
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">C:\fakepath\angularjs_tutorial.pdf</li>
<li class="list-group-item">display file path using ng-repeat in this panel</li>
</ul>
</div>
</div>
I have a button named attach that triggers the add() function from my controller, which shows the input field of type file.
The functionality is
- Show the choose file button(input type=file) when the attach button is clicked
- after selecting a file, hide the choose file button and show the attachment field
- Display the file path in the
litag of the attachment field using ng-repeat - Allow uploading another file next to the existing files, with the path of the new file appearing below the path of the previously selected file
The code in my controller is as follows:
$scope.attachFile = false;
$scope.displayAttachements = false;
$scope.add = function() {
$scope.attachFile = true;
}