Feature Request: Custom folders and subfolders in Asset Manager

[Ljstrickland]

As projects grow larger, managing hundreds of media files inside the flat structure of the Assets Panel becomes highly chaotic. While Webstudio categorizes files by type (Images, Fonts, etc.), there is no way to organize files by page context, component grouping, or brand tokens (e.g., separating blog post thumbnails from global UI icons).

I would love to see a Page-like folder system implemented inside the Assets Panel.

• Folder Creation: The ability to right-click or click a "+" icon to create a custom directory/folder.
• Nesting: Drag-and-drop assets into folders, and ideally, support nested subfolders.
• Breadcrumb Navigation: A simple folder path or tree navigation at the top of the panel to move backwards and forwards.

Currently, the only alternative is strictly using precise file-naming conventions (e.g., home-hero-bg.webp, blog-post1-thumb.webp) to utilize the search filter, which becomes incredibly tedious for larger web builds.

[kof]

We have a competing proposal using tags instead of folders: #3259 do you think your needs are covered by that proposal?

[Ljstrickland]

Apologies - I did attempt to search first (clearly quite poorly). While tags are great, I'm a folders person as it's so much clearer in organisation, especially for pages that are image heavy. The ability to drag prearranged assets into a folder rather than move and then tag is so much more intuitive and visually less chaotic as a user.

[kof]

assigning a tag to an asset is essentially 2 clicks: open menu, assign tag

[kof]

Benefit with tags is that one asset can have multiple tags. Basically being in multiple folders at the same time. Sometimes you need that because one asset can be used in multiple contexts.

[Ljstrickland]

Yes, I read your reasoning. You can have both? It's a common feature on most platforms that is better for most users, has more usability (UI) and better accessibility. There's a reason it's the default in UI above tags. Why don't operating systems just use tags for all files in one big folder rather than separate folders? Why does anything have folders over tags? It's organised. Methodically.

[kof]

Asset Manager folders — implementation plan

Scope

• Add folders and nested subfolders.
• Allow each asset to belong to one folder.
• Keep existing assets in the root folder.
• Use folders for organization only, without changing asset URLs, storage paths, references, or publishing.
• Keep tags out of scope.

Folder and asset grid

• Display folders and assets in the same grid.
• Display folders before assets.
• Show a folder's direct child folders and assets when it is opened.
• Maintain separate folder and asset groups while applying the active sort and direction to both.
• Sort folders alphabetically by folder name.
• Sort folders by their creation date when date sorting is active.
• Sort folders by the total size of assets in the folder and its descendants when file-size sorting is active.
• Use folder name as a stable sorting tie-breaker.

Assets panel header

• Add a create-folder icon beside the existing upload and cleanup actions.
• Open the create-folder dialog when the icon is clicked.
• Default the new folder's parent to the currently open folder.
• Show the create-folder action in the full Assets panel only, not in asset-selection popovers.

Breadcrumb navigation

• Place breadcrumbs in a persistent footer at the bottom of the Asset Manager.
• Keep the breadcrumb footer visible while the asset grid scrolls.
• Start the breadcrumb path with the root folder.
• Show every folder in the current path.
• Allow direct navigation to any breadcrumb level.
• Truncate long paths without hiding the current folder.
• Restore focus predictably after breadcrumb navigation.

Cascading folder selector

• Reuse one cascading folder selector for folder creation, asset details, folder moves, and asset moves.
• List the root and top-level folders in the first select.
• Reveal another select when the selected folder has child folders.
• Reveal additional selects as deeper folders are selected.
• Allow the currently selected level to be used as the destination without requiring selection of the deepest child.
• Remove all deeper selections when an earlier selection changes.
• Show the complete resulting folder path.
• Exclude a folder and all its descendants when selecting a destination for that folder.

Creating folders

• Include a folder-name field in the create-folder dialog.
• Include the cascading parent-folder selector in the create-folder dialog.
• Include Create and Cancel actions.
• Allow the parent to be changed to the root or any valid nested folder.
• Reject empty folder names.
• Reject duplicate folder names within the same parent.
• Allow the same folder name under different parents.

Asset details

• Add the cascading folder selector to the existing asset-details dialog.
• Initialize the selector with the asset's current folder.
• Save folder changes together with the other asset-detail changes.
• Respect existing asset-editing permissions.
• Keep the asset URL and all asset references unchanged when moving it.
• Show the complete selected folder path.
• Hide or disable folder editing when asset details are opened from a context that does not permit asset management.

Folder management

• Support creating folders.
• Support opening folders.
• Support renaming folders.
• Support moving folders.
• Support deleting folders.
• Support moving assets into folders with drag-and-drop.
• Support moving folders into other folders with drag-and-drop.
• Ask for confirmation before deleting a folder.
• Delete only the folder record when deleting a folder.
• Move a deleted folder's direct assets and child folders to its parent.
• Never delete asset files as a consequence of deleting a folder.
• Prevent moving a folder into itself.
• Prevent moving a folder into one of its descendants.
• Prevent invalid cross-project folder relationships.

Upload behavior

• Assign uploads started from the header to the currently open folder.
• Assign files dropped into the grid to the currently open folder.
• Assign files dropped directly onto a folder to that folder.
• Show uploading placeholders in the destination folder.
• Avoid creating folder assignments for failed uploads.

Search and filtering

• Show only the current folder's direct contents during normal browsing.
• Search the current folder and its descendants.
• Show the folder path for every search result.
• Apply file-type filters to assets rather than folders.
• Show empty folders in the full Assets panel.
• Hide folders with no compatible assets in their descendants when using a constrained asset picker.
• Return to the previously open folder when search is cleared.

Synchronization and compatibility

• Persist folders per project.
• Persist folder membership per asset.
• Synchronize folder creation, renaming, moving, and deletion between collaborators.
• Synchronize asset moves between collaborators.
• Include folder operations in undo and redo.
• Preserve folders during project duplication.
• Preserve folders during project import and export.
• Treat missing or invalid folder assignments as root.
• Keep projects created before this feature fully compatible.

Accessibility

• Make folders openable using the keyboard.
• Provide menu-based move actions as alternatives to drag-and-drop.
• Label each cascading select by its hierarchy level.
• Announce folder navigation and move results to assistive technologies.
• Preserve logical focus after folder creation, movement, deletion, and breadcrumb navigation.

Delivery

• Implement folder persistence and synchronization.
• Implement the folder grid, sorting, and bottom breadcrumbs.
• Implement the header creation action and folder management.
• Implement the cascading selector and asset-details integration.
• Implement upload destinations and drag-and-drop.
• Implement search, filtering, accessibility, and regression coverage.