We have decided to create our own browsing functionality due to the limitations of the existing HTML browse feature. While using the HTML browse, we can only select multiple files by pressing the Ctrl key, and we want to replicate this feature in our custom browse.
<div style="width: 387px; height: 300px; padding-top:5px;margin-right:10px; border: 1px solid white; ">
<ul>
<li ng-repeat="folders in folderList">
<button ng-attr-id="{{ 'object-' + $index}}"
style="cursor:pointer;border: 0px solid white; border-radius: 0px; padding-left: 30px;height:auto;margin-bottom: 5px;"
class="button btn-bgc bgc-hover"
data-ng-click="getFolderList($index)">
{{folders.name}}
<i class="fa fa-hdd-o"
ng-if="folders.type === 'Device'"
style="display: inline; float:left; padding: 2px; color: #D3D3D3;margin-left: -30px;"
aria-hidden="true"></i>
<i class="fa fa-folder-open"
ng-if="folders.type === 'folder'"
style="display: inline; float:left; padding: 2px; color: #FFE4B5;margin-left: -30px;"
aria-hidden="true"></i>
<i class="fa fa-file-o"
ng-if="folders.type === 'file'"
style="display: inline; float:left; padding: 2px; margin-left: -30px;" aria-hidden="true"></i>
</button>
</li>
</ul>
</div>
When a folder is selected in my application, it opens the folder; when a file is selected, it simply marks the file for future use. In the provided sample plunker, there are 2 folders and 3 files. Currently, only one file can be selected at a time. How can I implement multiple file selection by pressing Ctrl (similar to Windows file selection) and then display those selected files when the "Display Selected Files" button is clicked? Here is the link to the plunker:
https://plnkr.co/edit/REBtXPSH8sa0cvYvp9A4?p=preview
If any additional information is required, please let me know. Any assistance would be greatly appreciated.
// Code goes here
var testController = angular.module('test', []);
testController.controller('testController', ['$scope', '$document', function($scope, $document) {
$scope.folderList = [{name:"folder1",type:"folder"},{name:"folder2",type:"folder"},{name:"file1.txt",type:"file"},{name:"file2.txt",type:"file"},{name:"file3.txt",type:"file"}];
$scope.resetBackground = function () {
for (var i = 0; i < $scope.folderList.length; i++) {
document.getElementById('object-' + i).style.backgroundColor = "white";
}
}
$scope.getFolderList = function (index) {
$scope.resetBackground();
$document.on('keypress', function (event) {
if(event.keyCode == 17) { // 17 - Ctrl
// need to select multiple files here.
}
})
document.getElementById('object-' + index).style.backgroundColor = "#00FF00";
};
}]);