walnut_launchpad.html/templates/widgets/filetree.html

<div class="text-left">
  <div class="row">
    <ul class="breadcrumb">
      <li ng-repeat="breadcrumb in vm.breadcrumbs track by $index" ng-click="vm.getDirectoriesFromBreadcrumbs(breadcrumb);  vm.showUploadContainer = false; vm.showUploadFolderContainer = false; vm.showUploadFilesContainer = false; vm.showUploadButton = true;" data="{{ breadcrumb }}" class="cp breadcrumbs-list">
        {{ breadcrumb | capitalize }}
      </li>
    </ul>
  </div>
  <div class="row">
    <div class="col-lg-6">
      <ul class="tree ls-none">
        <li class="directories-go-here" ng-repeat="directory in vm.siteDirectories track by $index">
          <input type="checkbox" id="{{ r.challenge }}{{ $index }}" />
          <label class="tree_label" for="{{ r.challenge }}{{ $index }}" ng-click="vm.getDirectories(directory); vm.showUploadContainer = false; vm.showUploadFolderContainer = false; vm.showUploadFilesContainer = false;" data="{{ directory }}">{{ directory }}</label><span class="pull-right"><button type="button" class="btn btn-danger btn-xs" ng-click="vm.deleteFilesFrom(r, directory)" data="{{ directory }}" data="{{ r }}"><i class="fa fa-trash"></i></button></span>
        </li>
      </ul>
      <ul class="tree files-only ls-none">
        <li ng-repeat="file in vm.siteFiles track by $index">
          <span class="tree_label filez">{{ file }}</span><span class="pull-right"><button type="button" class="btn btn-danger btn-xs" ng-click="vm.deleteFilesFrom(r, file)" data="{{ file }}" data="{{ r }}"><i class="fa fa-trash"></i></button></span><br>
        </li>
      </ul>
      <div class="folder-actions">
        <hr>
        <div class="">
          <button type="button" name="button" class="btn btn-block btn-primary" ng-click="vm.showUploadFilesContainer = true; vm.autoPopulateFolderName(); vm.showUploadFolderContainer = false" ng-show="vm.showUploadButton">Upload files</button>
          <button type="button" name="button" class="btn btn-block btn-primary">Share folder</button>
          <ul class="ls-none folder-actions-list">
            <li class="{{ vm.currentFolder }}" ng-hide="vm.showUploadButton"><span><i class="fa fa-upload cp"></i> <a ng-click="vm.showUploadFilesContainer = true; vm.autoPopulateFolderName(); vm.showUploadFolderContainer = false;" class="cp">Upload files</a></span></li>
            <li class=""><span><i class="fa fa-folder cp"></i> <a ng-click="vm.showUploadFolderContainer = true;  vm.cleanPath(); vm.showUploadFilesContainer = false;" class="cp">New folder</a></span></li>
            <li class="{{ vm.currentFolder }}"><span><i class="fa fa-trash cp"></i> <a ng-click="vm.triggerDeleteFolder(vm.currentFolder, r)" data="{{ vm.currentFolder }}" data="{{ r }}" class="cp">Delete {{ vm.currentFolder | capitalize }} Folder</a></span></li>
          </ul>
        </div>
      </div>
      <div class="upload-container">
        <form ng-show="vm.showUploadFilesContainer">
          <hr>
          <div>
            <input type="file" ng-model="r.newFile" class="form-control" daplie-file-change="vm.Sites.setUpload(r)" />
            <div ng-if="r.isZip"><label><input type="checkbox" ng-model="r.unzip" /> Unpack .zip</label></div>
            <div ng-if="r.unzip"><label><input type="checkbox" ng-model="r.stripZip" /> Strip zip directory root</label></div>
            <div ng-if="vm.isZip" ><label>Unzip directory</label> <input type="text" ng-model="vm.unzipPath" /></div>
            <div ng-if="r.uploadTotal"><span ng-bind="r.uploadPercent">99</span>% | <span ng-bind="r.uploadProgress">1</span> MiB / <span ng-bind="r.uploadTotal">100</span> MiB</div>
            <input type="text" class="form-control hidden" ng-model="vm.autoPopulateWebPath" placeholder="/js/config/config.js" disabled/>
            <button ng-click="vm.Sites.upload(r)" type="button" name="button" class="btn btn-success" ng-show="vm.showCompleteFileUploadBtn">Add File</button>
          </div>
        </form>
        <form class="form-inline" ng-show="vm.showUploadFolderContainer">
          <hr>
          <ul class="ls-none">
            <li class="add-folder">
              <span>
                <i class="fa fa-folder"></i> <input type="text" class="form-control {{ vm.hideFolderInput }}" ng-model="vm.autoPopulateWebPath" ng-blur="vm.createNewFolder(r)" data="{{ r }}" style="width: 85%;"/>
                <label ng-show="vm.showFileUploadBtn">{{ vm.autoPopulateWebPath }}</label>
              </span>
            </li>
            <li class="text-center">
              <input type="file" ng-model="r.newFile" class="form-control" daplie-file-change="vm.Sites.setUpload(r)" ng-show="vm.showFileUploadBtn" />
              <div ng-if="r.isZip"><label><input type="checkbox" ng-model="r.unzip" /> Unpack .zip</label></div>
              <div ng-if="r.unzip"><label><input type="checkbox" ng-model="r.stripZip" /> Strip zip directory root</label></div>
              <!-- div ng-if="vm.isZip" ><label>Unzip directory</label> <input type="text" ng-model="vm.unzipPath" /></div -->
              <div ng-if="r.uploadTotal"><span ng-bind="r.uploadPercent">99</span>% | <span ng-bind="r.uploadProgress">1</span> MiB / <span ng-bind="r.uploadTotal">100</span> MiB</div>
            </li>
            <li>
              <button ng-click="vm.Sites.upload(r)" type="button" name="button" class="btn btn-success" ng-show="vm.showCompleteFileUploadBtn">Add File</button>
            </li>
          </ul>
        </form>
      </div>
    </div>
    <div class="col-lg-6">
      <pre style="font-size: 10px;">{{ vm.folderStructure | stringify }}</pre>
    </div>
  </div>
  <div class="row">
    <div class="padding-side-15">
      <button type="button" class="btn btn-danger pull-right" ng-click="vm.deleteFilesFrom(r, path)"><i class="fa fa-trash"></i> Remove all Files</button>
    </div>
  </div>
</div>