File Manager

Progressive-enhancement file browser. You write the full HTML structure once; wf-file-manager.js queries those elements and wires up all interactivity. A live read-only demo below lets you explore all three view modes, the preview panel, filtering, sorting, and breadcrumb navigation against a real demo folder.

Key capabilities:

• Three view modes - thumbnail grid , list , and table - persisted in localStorage
• Drag-and-drop and click-to-select upload with per-file XMLHttpRequest progress bars
• Inline folder creation and multi-file deletion
• Breadcrumb navigation for subfolder traversal
• Collapsible preview panel with file metadata, persisted in localStorage
• Sidebar filter by file type and sort control

Live Demo

Fully functional file manager running against a read-only demo folder. Browse, filter, sort, switch view modes and open the preview panel. Upload and delete actions return simulated responses — no files are modified.

Required Markup

The component expects a root element marked with data-wf-file-manager and data-wf-url . All child elements below must be present before the script initialises — the JS fills dynamic content only (breadcrumbs, file grid, upload rows, preview data).

<div class="wf-fm"
     data-wf-file-manager
     data-wf-url="/api/api-file-manager.php"
     data-wf-height="560px">

  <!-- Toolbar -->
  <div class="wf-fm-toolbar">

    <!-- File upload (WojoFileSelect injects its own trigger button) -->
    <div class="wf-fm-file-wrap wf-file">
      <input type="file" multiple>
    </div>

    <!-- New folder -->
    <div class="wf-fm-folder-wrap">
      <input class="wf-fm-folder-name" type="text" placeholder="Folder name">
      <button class="wf-fm-folder-add" type="button">New Folder</button>
    </div>

    <!-- Delete selected -->
    <button class="wf-fm-del-btn" type="button">Delete</button>

    <!-- View toggles -->
    <div class="wf-fm-view-btns">
      <button class="wf-fm-view-btn" data-view="thumb" type="button">Grid</button>
      <button class="wf-fm-view-btn" data-view="list"  type="button">List</button>
      <button class="wf-fm-view-btn" data-view="table" type="button">Table</button>
    </div>

    <!-- Preview panel toggle -->
    <button class="wf-fm-preview-toggle" type="button">Preview</button>

  </div>

  <!-- Body -->
  <div class="wf-fm-body">

    <!-- Sidebar -->
    <nav class="wf-fm-sidebar">
      <ul class="wf-fm-filter-nav">
        <li class="wf-fm-filter-item" data-filter="all">All Files</li>
        <li class="wf-fm-filter-item" data-filter="pic">Images</li>
        <li class="wf-fm-filter-item" data-filter="vid">Videos</li>
        <li class="wf-fm-filter-item" data-filter="aud">Audio</li>
        <li class="wf-fm-filter-item" data-filter="doc">Documents</li>
      </ul>
      <div class="wf-fm-sort-wrap">
        <select class="wf-fm-sort-sel">
          <option value="name-asc">Name A&ndash;Z</option>
          <option value="name-desc">Name Z&ndash;A</option>
          <option value="date-desc">Newest</option>
          <option value="date-asc">Oldest</option>
          <option value="size-desc">Largest</option>
          <option value="size-asc">Smallest</option>
        </select>
      </div>
    </nav>

    <!-- Main panel -->
    <div class="wf-fm-main">
      <div class="wf-fm-breadcrumbs"></div>  <!-- filled by JS -->
      <ul  class="wf-fm-upload-list"></ul>   <!-- filled by JS -->
      <div class="wf-fm-grid"></div>         <!-- filled by JS -->
    </div>

    <!-- Preview panel -->
    <aside class="wf-fm-preview">
      <div class="wf-fm-preview-thumb"></div>  <!-- filled by JS -->
      <div class="wf-fm-preview-meta"></div>   <!-- filled by JS -->
    </aside>

  </div><!-- /.wf-fm-body -->

  <!-- Footer -->
  <div class="wf-fm-footer">
    <span data-stat="files"></span>
    <span data-stat="dirs"></span>
    <span data-stat="space"></span>
  </div>

</div><!-- /.wf-fm -->

Child elements

View Modes

Three view modes are toggled by the .wf-fm-view-btn[data-view] buttons. The active mode is persisted to localStorage under the key wf-fm-view , so the user’s preference survives page reloads. The active button receives wf-active , and the grid container gets the corresponding modifier class.

Upload

Upload is handled by two mechanisms: the standard file-input inside .wf-fm-file-wrap (enhanced by WojoFileSelect) and drag-and-drop directly onto the file grid. Both paths use XMLHttpRequest with a progress event, so each file gets its own progress bar row in .wf-fm-upload-list .

Files are POST ed to the URL supplied in data-wf-url with action=upload . The file field name is file and the current path is sent as path so the server can place the file in the correct directory. On success the component fires wf:fm-upload and refreshes the directory listing.

{
  "ok": true,
  "file": {
    "name":     "photo.jpg",
    "path":     "images/photo.jpg",
    "size":     204800,
    "modified": 1717977600,
    "type":     "pic"
  }
}

Data Attributes

Place all attributes on the root .wf-fm element.

CSS Custom Properties

Override on the .wf-fm element or any ancestor.

.wf-fm {
  --wf-fm-height:        700px;
  --wf-fm-sidebar-width: 200px;
  --wf-fm-preview-width: 260px;
  --wf-fm-thumb-min:     140px;
}

API Endpoint

All communication goes to the single URL you supply in data-wf-url . The action parameter tells the server what to do. All error responses should return { "ok": false, "message": "..." } ; the component will display the message string in the UI.

GET – List directory

GET /api/files?action=files&path=images

{
  "ok": true,
  "path": "images",
  "items": [
    {
      "name":     "subfolder",
      "type":     "dir",
      "size":     0,
      "modified": 1717977600
    },
    {
      "name":     "photo.jpg",
      "type":     "pic",
      "size":     204800,
      "modified": 1717977600,
      "url":      "/uploads/images/photo.jpg",
      "thumb":    "/uploads/images/photo_thumb.jpg"
    }
  ]
}

POST - Create folder

POST /api/files
Content-Type: application/x-www-form-urlencoded

action=folder&path=images&name=new-folder

{ "ok": true }

POST - Delete files

POST /api/files
Content-Type: application/x-www-form-urlencoded

action=delete&paths=["images/photo.jpg","images/old-folder"]

{ "ok": true }

POST - Upload file

POST /api/files
Content-Type: multipart/form-data

action=upload&path=images
file=<binary>

{
  "ok": true,
  "file": {
    "name":     "photo.jpg",
    "path":     "images/photo.jpg",
    "size":     204800,
    "modified": 1717977600,
    "type":     "pic"
  }
}

Programmatic API

After initialization the instance is stored on the root element as el._wfFileManager .

const root = document.querySelector('[data-wf-file-manager]')
const fm = root._wfFileManager

fm.navigate('images/avatars')  // open a sub-folder
fm.refresh()                   // reload current directory
fm.destroy()                   // remove all event listeners

Events

All events bubble and are dispatched on the root .wf-fm element. Listen from any ancestor with addEventListener .

document.addEventListener('wf:fm-upload', e => {
  console.log('Uploaded:', e.detail.file.name, e.detail.data)
})

document.addEventListener('wf:fm-delete', e => {
  console.log('Deleted paths:', e.detail.paths)
})

document.addEventListener('wf:fm-folder', e => {
  console.log('Folder created:', e.detail.name)
})

document.addEventListener('wf:fm-select', e => {
  console.log('Selected file:', e.detail.file)
})

Class Reference