Logo of UI Challenges
Sign in

Gallery

See what others have created

File management
M

mahfujkhan

@mahfujkhan

HardSaaS

File management

Design a file management workspace for a web app. The screen should show a folder tree or breadcrumb path, a main file list, and a clear upload entry point. Make it obvious whether the user is browsing a folder, selecting files, or reviewing a single item.

The file list should support common actions: upload, download, rename, move, delete, and share if relevant. Use row actions, a contextual menu, and drag-and-drop where it makes sense. Keep selection state visible, and make bulk actions easy to find when multiple files are selected.

Include a preview panel or drawer for the selected file with name, type, size, modified date, owner, and any other useful metadata. If the file can be previewed, show that content directly; if not, show a useful fallback with the file icon and details.

Show the important system states: empty folder, uploading, upload failed, permission denied, and loading. Each state should tell the user what happened and what to do next. The design should feel like a working file tool, not a generic content grid.

What to deliver

  • Design a file browser with folders, file list, and breadcrumb navigation.
  • Include upload, download, rename, move, and delete actions.
  • Show file preview and metadata in a side panel or detail drawer.
  • Add drag-and-drop upload and drag-to-move interactions.
  • Provide empty, loading, and error states for the main file area.

Imagine you're designing for the digital equivalent of a tidy, yet spacious filing cabinet. Aesthetics matter, but never at the expense of findability and order!