interface.html

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

  <div class="progress upload-progress-bar hidden">
    <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 0%"></div>
  </div>

  <div class="file-manager-body">
    <div class="file-manager-leftside">
      <!-- <div class="split-bar"></div> -->
      <div class="dropdown-menu-holder">
        <div class="panel-group is-organization" id="organizations-accordion" role="tablist">
          <!-- Organization List Here -->
        </div>
      </div>
      <div class="trash-holder list-holder" role="tab" data-type="trash" data-browse-trash>
        <span class="trash-icon">
          <i class="fa fa-trash"></i>
        </span>
        <h4 class="panel-title trash-link">
          <div class="list-text-holder">
            <span>Trash</span>
          </div>
        </h4>
      </div>
      <div class="storage-holder hidden">
        <p><strong>Storage for <span>app name</span></strong></p>
        <div class="storage-progress-holder">
          <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuenow="0" aria-valuemax="500" style="width: 0%;"></div>
          </div>
          <div class="storage-size"><span class="storage-usage">0 Bytes</span> of <span class="storage-limit">500 MB</span></div>
        </div>
        <div class="btn btn-warning btn-upgrade">Upgrade for more storage</div>
      </div>
    </div>
    <div class="file-manager-middleholder">
      <div class="file-manager-subheader">
        <div class="header-breadcrumbs">
          <div class="current-folder-title">

          </div>
        </div>
        <div class="spinner-holder">
          <div class="spinner-overlay">Loading...</div>
        </div>
        <div class="search-holder">
          <select class="form-control search-type" id="search-type">
            <option value="organization">This organization</option>
            <option value="this-folder" selected>This folder</option>
          </select>
          <input type="text" class="form-control search-term" placeholder="Search...">
          <div class="search-term-clear hide" id="search-term-clear"><i class="fa fa-times" aria-hidden="true"></i></div>
        </div>
        <div class="new-btn-holder">
          <button type="button" class="btn btn-primary new-btn">New</button>
          <div class="new-menu">
            <ul>
              <li data-create-folder><i class="fa fa-plus-circle" aria-hidden="true"></i> Create new folder</li>
              <hr>
              <li>
                <form data-upload-file>
                  <input type="file" name="files[]" id="file_upload" multiple />
                  <label id="choose-file" for="file_upload">
                    <i class="fa fa-cloud-upload" aria-hidden="true"></i> Upload new file
                  </label>
                </form>
              </li>
            </ul>
          </div>
        </div>
        <a data-help-link href="https://help.fliplet.com/file-manager/" class="help-icon" target="_blank">
          <i class="fa fa-question-circle-o"></i>
        </a>
        <!--
        <div class="delete-holder">
          <div class="btn btn-default delete-multiple">
            <i class="fa fa-trash" aria-hidden="true"></i> Delete <span class="badge">3</span>
          </div>
        </div>
      -->
      </div>
      <div class="file-manager-content">
        <div class="file-manager-filelist">
          <div class="file-table">
            <div class="file-table-header">

              <div class="file-cell selectable">
                <div class="file-select">
                  <div class="checkbox checkbox-icon">
                    <input type="checkbox" id="select_all" name="select_all" value="">
                    <label for="select_all">
                      <span class="check"><i class="fa fa-check"></i></span>
                    </label>
                  </div>
                </div>
              </div>
              <div class="file-cell file-name-cell">
                <div>
                  Name
                </div>
              </div>
              <!-- HIDE
                <div class="file-cell">
                  <div class="file-owner">
                    Owner
                  </div>
                </div>
                -->
              <div class="file-cell file-date-cell">
                Created
              </div>
              <div class="file-cell file-deleted-cell hidden">
                Origin folder
              </div>
              <div class="file-cell file-deleted-cell hidden">
                Deleted
              </div>
              <!-- HIDE
                <div class="file-cell">
                  <div class="file-size">
                    File size
                  </div>
                </div>
                -->
              <div class="file-cell search-result-cell file-path-cell">
                Path
              </div>
              <div class="file-cell search-result-cell file-size-cell">
                Dimensions
              </div>
              <div class="file-cell folder-result-cell file-id-cell">
                ID
              </div>

            </div>
            <div class="file-table-body">
              <!-- FOLDER CONTENT WILL BE HERE -->
            </div>
          </div>
          <div class="empty-state">
            <span>&#x1F633</span>
            <h3>This seems to be empty.</h3>
            <p>Use the "New" button.</p>
          </div>
          <div class="search-empty-state">
            <span>&#x1F633</span>
            <h3>Nothing found.</h3>
          </div>
          <div class="pagination pull-right"></div>
          <div class="drop-zone-wrapper">
            <div class="drop-zone transparent" id="drop-zone">
              <div class="drop-zone-info">
                <div class="drop-zone-icon animated pulse infinite">
                  <i class="fa fa-cloud-upload"></i>
                </div>
                <div class="drop-zone-box">
                  <p>Drop files to upload them instantly to:</p>
                  <p><i class="fa fa-folder-open"></i> <strong><span class="drop-zone-folder-name"></span></strong></p>
                </div>
              </div>
              <div>
                <input type="file" id="upload-file" style="display: none;" multiple />
              </div>
            </div>
          </div>
        </div>
        <div class="file-manager-rightside">
          <div class="help-tips">
            <h2>Did you know?</h2>
            <p>All users from an organization can access <strong>Organization</strong> folders and edit its content.</p>
            <p>You can make files only accessible to specific apps. Use the menu on the left to browse app specific files.</p>
          </div>
          <div class="side-actions">
            <div class="shared-info">
              <div class="item multiple">
                <i class="fa fa-files-o"></i>
              </div>
              <div class="item file">
                <i class="fa fa-file"></i>
              </div>
              <div class="item folder">
                <i class="fa fa-folder-open"></i>
              </div>
              <div class="item image">
                <img />
              </div>
              <p>You have selected <span class="items-selected"></span></p>
            </div>
            <div class="item-actions">
              <div class="single-item">
                <div class="btn-group">
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Action <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#" open-action>Open</a>
                    </li>
                    <li>
                      <a href="#" rename-action>Rename</a>
                    </li>
                    <li>
                      <a href="#" download-action>Download</a>
                    </li>
                    <li>
                      <a href="#" restore-action>Restore</a>
                    </li>
                    <li role="separator" class="divider"></li>
                    <li>
                      <a href="#" class="text-danger" delete-action>Move to trash</a>
                      <a href="#" class="text-danger" file-remove-trash>Delete forever</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="multiple-item">
                <div class="btn-group">
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Action <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#" download-action>Download</a>
                    </li>
                    <li>
                      <a href="#" restore-action>Restore</a>
                    </li>
                    <li role="separator" class="divider"></li>
                    <li>
                      <a href="#" class="text-danger" delete-action>Move to trash</a>
                      <a href="#" class="text-danger" file-remove-trash>Delete forever</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="alert-wrapper">
    <div class="alert-message"></div>
    <div class="alert-action">
      <button type="button" id="alert-btn-action">Go to folder</button>
    </div>
  </div>
</div>

<template id="template-folder">
  <div class="file-row" data-folder="\{{parentId}}" data-name="\{{name}}" data-org-id="\{{organizationId}}" data-app-id="\{{appId}}" data-id="\{{id}}" data-file-type="folder" draggable="true">
    <div class="file-cell selectable">
      <div class="file-select">
        <div class="checkbox checkbox-icon">
          <input type="checkbox" id="select_folder_\{{id}}" name="select_folder_\{{id}}" value="\{{id}}">
          <label for="select_folder_\{{id}}">
            <span class="check"><i class="fa fa-check"></i></span>
          </label>
        </div>
      </div>
    </div>
    <div class="file-cell file-name-cell">
      <div class="file-name" data-browse-folder>
        <span>\{{name}}</span>
      </div>
    </div>
    \{{#if originPath}}
      <div class="file-cell">
        <div class="file-owner" data-toggle="tooltip" data-placement="left" title="\{{originPath.tooltip}}">
          <span>
            \{{#if originPath.isApp}}
              \{{#if originPath.appIcon}}<img loading="lazy" class="trash-item-icon" src="\{{originPath.appIcon}}">\{{/if}}
            \{{else}}
              <i class="fa fa-fw fa-lg fa-building-o"></i>
            \{{/if}}
            \{{{originPath.path}}}
          </span>
        </div>
      </div>
    \{{/if}}
    <div class="file-cell file-date-cell">
      \{{#if deletedAt}}
        <span>\{{deletedAt}}</span>
      \{{else}}
        <span>\{{formattedDate}}</span>
      \{{/if}}
    </div>
    <!-- HIDE
    <div class="file-cell">
      <div class="file-size">
        <span>\{{#if size}} \{{size}} \{{else}} - \{{/if}}</span>
      </div>
    </div>
    -->
    <div class="file-cell search-result-cell file-path-cell">
      <span>
        <a href="javascript:;" class="path-link" data-folder data-id="\{{id}}" data-parent-id="\{{parentItemId}}" data-type="\{{parentItemType}}" title="\{{relativePath}}">\{{relativePath}}</a>
      </span>
    </div>
    <div class="file-cell search-result-cell file-size-cell">
      <span></span>
    </div>
    <div class="file-cell folder-result-cell file-id-cell">
      <span>\{{id}}</span>
    </div>
  </div>
</template>

<template id="template-file">
  <div class="file-row" data-org-id="\{{organizationId}}" data-folder="\{{mediaFolderId}}" data-name="\{{name}}" data-id="\{{id}}" data-file-type="\{{#if thumbnail}}image\{{else}}document\{{/if}}" data-av-status="\{{#if metadata.av.status}}\{{metadata.av.status}}\{{/if}}" data-file-url="\{{url}}" data-app-id="\{{#if mediaFolderId}}\{{mediaFolder.appId}}\{{else}}\{{appId}}\{{/if}}" draggable="true">
    <div class="file-cell selectable">
      <div class="file-select">
        <div class="checkbox checkbox-icon">
          <input type="checkbox" id="select_file_\{{id}}" name="select_file_\{{id}}" value="\{{id}}">
          <label for="select_file_\{{id}}">
            <span class="check"><i class="fa fa-check"></i></span>
          </label>
        </div>
      </div>
    </div>
    <div class="file-cell file-name-cell">
      <div class="file-name" data-open-file>
        \{{#if thumbnail}}<img loading="lazy" src="\{{thumbnail}}" />\{{/if}}
        <span>\{{name}}</span>
        \{{#ifCond metadata.av.status '===' 'infected'}}
          <i class="fa fa-bug" data-toggle="tooltip" data-placement="top" title="Virus detected"></i>
        \{{/ifCond}}
      </div>
    </div>
    \{{#if originPath}}
      <div class="file-cell">
        <div class="file-owner" data-toggle="tooltip" data-placement="left" title="\{{originPath.tooltip}}">
          <span>
            \{{#if originPath.isApp}}
              \{{#if originPath.appIcon}}<img loading="lazy" class="trash-item-icon" src="\{{originPath.appIcon}}" alt="">\{{/if}}
              \{{else}}
              <i class="fa fa-fw fa-lg fa-building-o"></i>
              \{{/if}}
            \{{{originPath.path}}}
          </span>
        </div>
      </div>
    \{{/if}}
    <div class="file-cell file-date-cell">
      <span>\{{formattedDate}}</span>
    </div>
    <!-- HIDE
    <div class="file-cell">
      <div class="file-size">
        <span>\{{size}}</span>
      </div>
    </div>
    -->
    <div class="file-cell search-result-cell file-path-cell">
      <span>
        <a href="javascript:;" class="path-link" data-folder data-id="\{{id}}" data-parent-id="\{{parentItemId}}" data-type="\{{parentItemType}}" title="\{{relativePath}}">\{{relativePath}}</a>
      </span>
    </div>
    <div class="file-cell search-result-cell file-size-cell">
      <span>\{{dimensions}}</span>
    </div>
    <div class="file-cell folder-result-cell file-id-cell">
      <span>\{{id}}</span>
    </div>
  </div>
</template>

<template id="template-folder-item">
  <li data-type="folder" data-folder data-id="\{{id}}" data-browse-folder>
    <div class="list-holder clearfix">
      <i class="fa fa-chevron-right" aria-hidden="true"></i>
      <div class="list-text-holder">
        <span>\{{name}}</span>
      </div>
    </div>
  </li>
</template>

<template id="template-organizations">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab">
      <span class="arrow-holder" role="button" data-toggle="collapse" href="#organization-\{{id}}">
        <i class="fa fa-angle-right"></i>
      </span>
      <h4 class="panel-title list-holder" data-type="organization" data-org-id="\{{id}}" data-org data-browse-folder>
        <div class="list-text-holder">
          <span>\{{name}}</span>
          <p>Organization</p>
        </div>
      </h4>
    </div>
    <div id="organization-\{{id}}" class="panel-collapse collapse" role="tabpanel">
      <div class="panel-body">

      </div>
    </div>
  </div>
</template>

<template id="template-apps">
  <div class="app-holder" data-type="app" data-app-id="\{{id}}" data-app data-browse-folder>
    <div class="list-holder">
      <div class="list-text-holder">
        <span>\{{name}}</span>
      </div>
    </div>
  </div>
</template>