浏览器端实现带层级结构的文件夹上传功能技术问询

Been there, done that—this is a super frustrating limitation that’s been plaguing web devs for ages. You’re spot-on about it being a browser-level issue; there’s no universal standard that lets web apps natively capture full folder hierarchy during uploads right now. Let me break down why this happens and what your options are:

Why You Can’t Preserve Hierarchy Natively #

• Early browser File API support only exposed individual files, and when folder uploads (drag-and-drop or the webkitdirectory input attribute) were added, they intentionally flattened all files into a single list. The core problem is that the standard File object doesn’t carry metadata about its parent folder structure.
• While some browser-specific attempts tried to add partial hierarchy details, there’s no cross-browser standard that ensures consistent access to nested folder paths or structure.

Workarounds to Try Right Now #

Even though native support is missing, here are some practical ways to handle this:

• Leverage webkitRelativePath (Chromium-Only): If your user base is limited to Chrome, Edge, or other Chromium-based browsers, the webkitRelativePath property on File objects will give you the full relative path of the file within the uploaded folder (e.g., project/assets/images/logo.png). You can parse this string to reconstruct the hierarchy on your server. Here’s a quick code snippet to test this:

  const fileInput = document.querySelector('input[type="file"][webkitdirectory]');
  fileInput.addEventListener('change', (e) => {
    const files = Array.from(e.target.files);
    files.forEach(file => {
      console.log('Relative path:', file.webkitRelativePath);
      // Send this path alongside the file to your server to rebuild the folder structure
    });
  });
  

  Just keep in mind this won’t work in Firefox or Safari, so it’s not a cross-browser fix.
• Ask Users to Upload Zipped Folders: This is the most reliable cross-browser approach. Have users zip their entire folder (with hierarchy intact) before uploading. Your app can then use a client-side JavaScript library (like JSZip) to unzip the file and read the full structure, or pass the ZIP to your server for extraction. It adds an extra step for users, but it guarantees you get the exact folder hierarchy.
• Fragile Drag-and-Drop Inference: Some libraries attempt to guess folder structure by tracking the order of dragged items or using browser-specific drag events, but this is inconsistent and prone to breaking across different browsers or user behaviors—so it’s not recommended for production.

Future Possibilities #

The File System Access API (currently supported only in Chromium browsers) does allow reading full folder structures directly from the user’s device, but it’s a more powerful tool that requires explicit user permission. It’s focused on direct file system access rather than traditional upload workflows, so it’s not a drop-in replacement yet. Still, it’s a sign that better folder handling might become standard across browsers eventually.

内容的提问来源于stack exchange，提问作者user856232