Building a File Explorer Component: A Complete Guide

Building a File Explorer Component: A Complete Guide

A file explorer (tree view) is a common machine coding question that tests recursion and nested data rendering.

Requirements

• Display a tree of files and folders.
• Folders can expand/collapse on click.
• Show different icons for files and folders.
• Nested indentation based on depth.
• Handle deeply nested structures.

Data Structure

const fileTree = {
  name: "src",
  type: "folder",
  children: [
    { name: "index.js", type: "file" },
    {
      name: "components",
      type: "folder",
      children: [
        { name: "Header.js", type: "file" },
        { name: "Footer.js", type: "file" },
      ],
    },
    { name: "utils", type: "folder", children: [{ name: "helpers.js", type: "file" }] },
  ],
};

Recursive Rendering

function renderTree(node, depth = 0) {
  const div = document.createElement("div");
  div.style.paddingLeft = depth * 20 + "px";
  div.className = "tree-node " + node.type;

  const icon = node.type === "folder" ? "📁" : "📄";
  div.innerHTML = `<span class="icon">${icon}</span> <span>${node.name}</span>`;

  if (node.type === "folder" && node.children) {
    div.style.cursor = "pointer";
    const childrenContainer = document.createElement("div");
    childrenContainer.style.display = "none";
    node.children.forEach((child) => {
      childrenContainer.appendChild(renderTree(child, depth + 1));
    });
    div.addEventListener("click", (e) => {
      e.stopPropagation();
      const isVisible = childrenContainer.style.display !== "none";
      childrenContainer.style.display = isVisible ? "none" : "block";
      div.querySelector(".icon").textContent = isVisible ? "📁" : "📂";
    });
    const wrapper = document.createElement("div");
    wrapper.appendChild(div);
    wrapper.appendChild(childrenContainer);
    return wrapper;
  }
  return div;
}

document.getElementById("fileExplorer").appendChild(renderTree(fileTree));

CSS

.tree-node { padding: 4px 0; display: flex; align-items: center; gap: 6px; }
.tree-node.folder { font-weight: bold; }
.tree-node.file { color: #555; }
.tree-node:hover { background: #e0e0e0; cursor: pointer; }
.icon { width: 20px; }

Edge Cases

• Empty folders (no children).
• Very deep nesting (performance).
• Files at the root level.
• Toggle state persistence.
• File click (show content or select).

The Takeaway

File explorer: tree data structure, recursive render function, click to expand/collapse folders, indentation by depth, icons for files/folders. Handle empty folders and deep nesting. Use stopPropagation to prevent parent folders from toggling when clicking children. This tests recursion and DOM manipulation.