File Browser
Description
The FileBrowser component is designed to navigate through different directories within a folder structure and display a list of files. It features an interactive navigation component that updates to reflect the user's current location within the directory structure. The component integrates with an API to fetch contents dynamically when a folder is selected.
Behavior
Navigating Into Folders
Clicking on a folder initiates an API call to fetch the contents of that folder. This action is essential for exploring deeper into the directory structure.
Breadcrumb Navigation
Users can click directly on any part of the breadcrumb trail to navigate back to any previously accessed directory. This feature enhances user navigation efficiency by allowing quick jumps to higher levels in the folder hierarchy without needing to sequentially backtrack.
Path Updates
The navigation component dynamically updates to reflect the user's current location within the file system, starting from 'Home', which represents the root folder. Each subsequent directory accessed by the user is added to the breadcrumb trail, maintaining an accurate and interactive path history.
Home Directory
When the current location is 'Home', the navigation component displays a single entry for the root folder. This setup simplifies the interface when users are at the starting point of their file system journey.
Example
File Name | Size | File Type | Actions |
|---|---|---|---|
| 2.3MB | |||
| 1.2GB | MOV video | ||
| 1.5MB | image | ||
| 2.3MB | |||
| 0.9MB | |||
| 1.5MB | |||
| 2.3MB | |||
| 0.9MB | zip | ||
| 0.9MB | zip | ||
| 2.3MB | |||
| 0.9MB | |||
| 1.5MB | audio | ||
| 2.3MB | |||
| 0.9MB | |||