Folder Upload
Definition
Folder upload lets someone drop a directory onto a page and have the host rebuild it exactly as it was. The distinction that matters is structure: a multi-file selection sends twenty files with twenty names, while a folder upload sends twenty files each carrying its path, such as assets/css/main.css. Browsers support this through the webkitdirectory attribute on a file input and the File System Access API, and each file arrives with a webkitRelativePath telling the server where it belongs. This is what makes a site work on arrival, because the links inside its HTML are written against those same paths. It is the alternative to a ZIP archive, which achieves the same thing by packing the tree into one file first, and it is usually paired with drag-and-drop upload in the interface.
Why It Matters
A static site is not a pile of files; it is a pile of files in a particular arrangement. Flatten a 40-file project into one directory and every stylesheet reference, script tag and image source misses, so the page loads as unstyled text and nobody can tell why. Uploading the folder keeps the arrangement and the site simply works. The practical gain is time: a small site with images, fonts and a couple of stylesheets is one drag rather than forty file pickers, and there is no zipping step to get wrong.
How It Works
The browser walks the dropped directory and produces a flat list of files, each tagged with its relative path from the folder root. Those paths travel with the upload, so the host writes every file to a matching key and the tree is reconstructed on the far side without any guessing. Requests then resolve by path in the ordinary way: a request for /assets/logo.svg finds the object stored under that key. Hosts commonly filter as they go, skipping .DS_Store, Thumbs.db, dot-directories such as .git and, where they can tell, dependency folders — none of which a visitor will ever request. Empty directories vanish, since object storage has no real folders, only keys that happen to contain slashes. An index.html at the top of the tree becomes the address's entry point.
Real-World Example
A developer finishes a one-page microsite: index.html, a styles folder, four images and a web font. Dragging the whole folder into 99helpers puts it live at lumen-launch.99helpers.site with the font and stylesheet resolving first time. Uploading the same files as a loose selection would have placed styles/main.css at the root instead, and the page would have appeared as black text on white with the font falling back to the system default.
Common Mistakes
- ✕Selecting the files inside the folder rather than the folder itself — the paths are lost, and every relative path in the HTML then points at nothing
- ✕Uploading the project root instead of the build output, which publishes source files, configuration and dependency trees alongside the site
- ✕Assuming an empty directory will be preserved — object storage keeps keys, not folders, so a directory with nothing in it never arrives
- ✕Dragging a folder synced by a cloud client whose files are placeholders on disk, so the upload stalls while each one is fetched down first
Related Terms
ZIP Archive
A single .zip file that holds many files and folders, each compressed separately. On a host it is used two ways: served as one download, or unpacked on upload so its contents are served individually.
Drag-and-Drop Upload
Drag-and-drop upload lets someone drag a file from their desktop or file manager straight onto a web page to begin uploading it. There is no button to press and no file picker dialog to navigate.
Upload Limit
An upload limit is the ceiling on a single upload operation — how much you may send in one request, and sometimes how many files or how often. It constrains the act of sending, not the size of any one stored file and not the total you are allowed to keep.
Relative Path
A relative path points at a file starting from the page that mentions it, rather than from the site root. It has no leading slash — styles.css, img/logo.png, ../fonts/inter.woff2.
index.html
index.html is the file a web server returns when a visitor asks for a folder rather than a named file. It is the default document for the site root and for every directory inside it.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →