HTML-tools

Gratis Directory Upload Input Generator

Genereer HTML-bestandsinvoer met webkitdirectory voor map-upload, drag-and-drop-zone en bestandslijst met webkitRelativePath.

Tool laden...

Wat is Directory Upload Input Generator?

The webkitdirectory attribute on an input type=file element lets users select an entire folder instead of individual files. When a folder is selected, the browser populates the input files FileList with all files from the selected directory and its subdirectories. Each file has a webkitRelativePath property that provides the path relative to the selected directory (for example, images/logo.png). The standardized directory attribute provides the same functionality across modern browsers.

Snel antwoord

Use input type=file with the webkitdirectory attribute to let users select entire folders for upload. Each file in the selected directory exposes a webkitRelativePath property showing its path relative to the chosen folder. Supported in Chrome 30+, Edge 12+, Safari 11.1+, and Firefox 50+. The generated HTML includes a drag-and-drop zone, file list display with directory tree view, and support for single-file, multiple-file, and directory modes.

Beperkingen

webkitRelativePath is only available for files selected through a directory picker -- files added via drag-and-drop from the operating system do not have path information in Firefox and Safari, though Chrome and Edge support directory drag-and-drop.
Browser support for directory input is strong in Chromium-based browsers and Firefox but Safari's implementation has historically lagged. The standardized directory attribute is supported in Safari 17+ but older Safari versions require the webkitdirectory prefix.
Large directory selections (thousands of files) can freeze the browser tab while the file list is being populated and displayed. Use lazy rendering or a Web Worker for production deployments handling large directories.

Zo gebruik je deze tool

Choose the upload mode: single file (one file at a time), multiple files (select several files), or directory (select an entire folder).
Configure the drag-and-drop zone: enable or disable drag-and-drop support, customize the drop zone text and active state styling (border color, background, or overlay).
Customize the file list display: show file names, sizes, types, and the webkitRelativePath for directory uploads. Toggle between a flat list and a tree view that preserves the directory structure.
Copy the generated HTML with embedded CSS and JavaScript. The output includes a complete, self-contained file upload interface with event handling for the change event and drag-and-drop events.

Waarvoor je het kunt gebruiken

Build an upload interface for a documentation site that accepts entire folders of images or markdown files while preserving the directory structure.
Create a bulk file upload tool for a CMS where editors drag and drop a folder of assets and the relative paths are used for URL mapping.
Design a migration tool that accepts a folder of exported content and uses webkitRelativePath to reconstruct the original directory hierarchy on the server.

Gebruik

Praktische voorbeelden

Voorbeeld

Documentation image uploader

A documentation site needs to accept uploads of entire image folders. Users drag the assets/images directory onto the drop zone. The input lists all files with their relative paths -- hero/header.jpg, icons/search.svg, and screenshots/dashboard.png. On upload, the server reconstructs the directory structure and maps the paths to the corresponding documentation page URLs.

Voorbeeld

Email template asset collector

An email designer needs to collect all assets for a campaign in a single upload. They select the campaign folder using the directory picker. The interface shows a tree of files organized by subdirectory -- images/headers/, images/icons/, and images/logos/. Each file displays its size and type alongside its webkitRelativePath for server-side processing.

Veelgemaakte fouten

Using webkitdirectory without checking browser support -- it works in Chrome, Edge, Safari, and Firefox, but not in all browsers. Always provide a fallback to regular file inputs and detect support using webkitdirectory in document.createElement(input) before showing the directory picker.
Assuming webkitRelativePath is available for all files -- only files selected via a directory picker have webkitRelativePath. Files added via drag-and-drop from outside the browser (like dragging from the desktop) do not have this property unless they were also selected through a directory input.
Not handling the case where the directory contains thousands of files -- browsers may limit the number of files returned by the directory picker, and the UI may become sluggish if you try to render all files at once. Paginate or virtualize the file list for large directories.

Verificatie

Open the generated HTML in Chrome. Click the directory picker and select a folder containing subdirectories with files. Verify that the file list displays all files with their correct webkitRelativePath values (for example, subfolder/filename.ext) and that file sizes and types are shown correctly.
Test the drag-and-drop zone by dragging a folder from the file explorer onto the drop area. In Chrome and Edge, verify that the folder contents appear with the correct relative paths. In Firefox and Safari, verify that a helpful message appears directing users to use the directory picker button instead.

FAQ

Vragen over Directory Upload Input Generator

What is the difference between webkitdirectory and the standard directory attribute?

webkitdirectory was the original prefixed implementation from WebKit browsers (Chrome, Safari). The standard directory attribute provides the same functionality and is supported in Chrome 116+, Edge 116+, Safari 17.0+, and Firefox 50+. Both expose webkitRelativePath on File objects. Use the standard directory attribute for modern browsers and webkitdirectory as a fallback for older Chromium versions.

Can I use drag-and-drop with directory upload?

Yes, but with limitations. Drag-and-drop of folders from the operating system file manager works in Chrome and Edge. Firefox and Safari do not support dragging folders into a drop zone. The generated code handles both cases: it shows the directory picker as a fallback when drag-and-drop is not available for folders. For individual files, drag-and-drop works in all modern browsers.

How does webkitRelativePath work with nested directories?

webkitRelativePath provides the full path from the selected directory to the file, using forward slashes as separators. For example, selecting a directory named assets that contains images/logo.png gives each file a webkitRelativePath of images/logo.png. The path always uses forward slashes regardless of the operating system. You can use this path to reconstruct the directory structure on the server.

How many files can a directory input handle?

There is no official limit defined in the specification, but browsers impose practical limits. Chrome limits directory selection to approximately 10,000 files in a single directory picker. For larger datasets, consider uploading files in batches or using a Web Worker to process the file list without blocking the UI. The file list display in the generated code includes a file count and total size to help users understand the scope of their selection.

Gerelateerde tools