Builditlive – File Manager Web Application

Web Designer – Individual Contributor · 2015 · 4 months · 2 people · 8 min read

Delivered the complete frontend build of a Dropbox-integrated file management web application — implementing a structured file browser UI with folder permissions, file preview, and full CRUD functionality via the elFinder API, from client mockups through to development team integration support

Overview

Built the frontend for Builditlive — a cloud file management web application that integrated with Dropbox to provide users with a more structured, permission-aware interface for organising and interacting with their files. The platform surfaced Dropbox storage through a polished file browser UI with folder-level permission controls, file preview capabilities, and full add, edit, and delete functionality powered by the elFinder API. Working as the sole frontend contributor, owned the full delivery lifecycle from requirement analysis and project planning through to HTML5/CSS3 build and hands-on integration support for the backend team.

Problem

Dropbox's native interface, while functional for personal file storage, lacked the structured organisation, permission controls, and workflow-oriented UI that teams and businesses needed to manage files collaboratively. Builditlive addressed this gap by building a purpose-designed file management interface on top of Dropbox — adding folder-level permissions, a structured directory view, file preview without download, and inline editing and deletion workflows. The frontend needed to present a complex set of file management interactions in a clean, intuitive interface that felt faster and more controlled than navigating Dropbox directly, while integrating reliably with both the Dropbox storage layer and the elFinder API.

Constraints

  • elFinder API integration required frontend markup and interaction patterns to conform to its expected DOM and event model
  • Dropbox file system structure must be presented in a more organised, permission-aware UI without exposing backend complexity to the user
  • File preview, permission management, and CRUD operations required a rich interactive layer beyond standard page-based navigation
  • No frontend framework — built entirely in HTML5, CSS3, jQuery, and vanilla JavaScript
  • Design delivered as client mockups — implementation required faithful translation with no independent design decisions
  • Four-month timeline as solo frontend contributor covering planning, build, and integration handoff

Approach

Began with a detailed requirement analysis — reviewing the client mockups alongside the elFinder API documentation to understand how the file manager interaction model mapped to the available API surface. Identified the full component inventory (directory tree, file grid, context menus, permission panels, preview modals, toolbar actions) and produced a project timeline before any build work began. Built the interface component by component — directory navigation, file grid views, permission management panels, and preview overlays — ensuring each component was structured to integrate cleanly with elFinder event hooks and the Dropbox-backed data layer. jQuery handled the interactive layer: context menus, drag-and-drop file operations, modal preview workflows, and dynamic directory tree updates. Supported the backend team throughout integration, resolving markup and event binding issues as they emerged in the development environment.

Key Decisions

Study elFinder API documentation before writing a single line of markup

Reasoning:

elFinder is an opinionated file manager library with specific expectations about DOM structure, CSS class naming, and JavaScript event hooks. Building the frontend UI without understanding these constraints first would have produced markup that required significant restructuring during integration. Front-loading the API analysis meant every component was built to integrate cleanly from the start, avoiding the costly rework that typically accompanies late-discovered API incompatibilities.

Alternatives considered:
  • Build UI from mockups first and adapt to elFinder constraints during integration
  • Replace elFinder with a custom file management implementation
  • Use elFinder's default UI and override styles only

jQuery for the rich interactive file management layer

Reasoning:

Builditlive's UI required a class of interactivity — drag-and-drop file operations, context menus, dynamic directory tree updates, modal preview workflows, and AJAX-driven permission changes — that was significantly more complex than a standard content website. jQuery's event delegation, AJAX utilities, and plugin ecosystem (including drag-and-drop and tree view components) provided reliable, cross-browser-tested foundations for all of these patterns without the overhead of a full MVC framework that would have been disproportionate for the project scope.

Alternatives considered:
  • Vanilla JavaScript with manual cross-browser event handling
  • AngularJS 1.x for a more structured application architecture
  • Backbone.js for lightweight MVC structure

Context menu and toolbar action pattern for file operations over inline editing

Reasoning:

File managers live or die on interaction efficiency — users performing frequent add, edit, delete, and preview operations need workflows that feel fast and direct. A right-click context menu combined with a persistent toolbar action bar — mirroring the interaction model of native OS file managers — was more intuitive for users already familiar with desktop file management than inline editing patterns or wizard-style workflows. It also mapped more cleanly to elFinder's built-in command model.

Alternatives considered:
  • Inline editing controls on each file row
  • Separate action pages for each file operation
  • Floating action button pattern

Tech Stack

  • HTML5
  • CSS3
  • jQuery
  • JavaScript
  • elFinder API
  • Dropbox API (frontend integration)
  • Responsive Design
  • CSS Animations

Result & Impact

  • Cloud file management & Dropbox integration
    Application Type
  • 2 developers, 4 months
    Delivery Model
  • elFinder + Dropbox
    API Integrations
  • Preview, add, edit, delete, permissions
    File Operations

Builditlive transformed raw Dropbox storage into a structured, permission-aware file management experience that gave teams meaningful control over how their files were organised and accessed. The elFinder integration — approached with API analysis upfront rather than as an afterthought — produced a clean, maintainable integration that the backend team could build on without frontend restructuring. The context menu and toolbar interaction model delivered a file management UX that felt native and efficient, reducing the friction of routine file operations compared to navigating Dropbox's own interface. The engagement demonstrated the ability to work with third-party APIs at the frontend layer — understanding library constraints and designing UI that works with, not against, the underlying integration model.

Learnings

  • Reading API documentation before writing UI code is not optional when the frontend is tightly coupled to a library's DOM expectations — it is the difference between a clean integration and an expensive rebuild
  • File management UX is a studied interaction pattern — native OS conventions (context menus, drag-and-drop, directory trees) exist because users already understand them; reinventing them introduces unnecessary friction
  • Third-party API integration at the frontend layer requires the developer to hold two mental models simultaneously — the user's interaction intent and the library's technical constraints — and reconcile them in the markup
  • jQuery's plugin ecosystem was at its most valuable for complex interactive patterns in 2015 — drag-and-drop, tree views, and context menus all had well-tested plugin implementations that would have taken weeks to build reliably from scratch
  • Cloud storage integrations require careful thought about loading states and optimistic UI — file operations on remote storage are not instantaneous, and the UI must communicate progress and failure clearly

Requirements & API Analysis

Established a clear delivery foundation before any implementation began:

  • Requirement analysis — reviewed client mockups in full, catalogued the complete view and component inventory, and mapped all file management interaction flows across the application
  • elFinder API study — analysed the elFinder documentation ahead of build to understand DOM structure expectations, CSS class conventions, JavaScript event hooks, and command model constraints before writing markup
  • Dropbox integration scoping — collaborated with the backend team to understand how Dropbox file system data would be surfaced to the frontend, ensuring the UI component structure was compatible with the data model
  • Project timeline and estimation — produced a structured delivery plan covering component build, interactive layer development, and backend handoff
  • Interaction state mapping — identified and clarified loading states, empty states, error conditions, and permission-restricted views not represented in the static mockups

File Manager Interface

Built the full file management UI from client mockups with elFinder API compatibility throughout:

  • Directory tree navigation — hierarchical folder browser with expand/collapse, active state indicators, and dynamic updates on folder creation and deletion
  • File grid and list views — dual-view file browser displaying file thumbnails, metadata, and type indicators with toggle between grid and list layout modes
  • Folder permission panels — interface for assigning and managing read/write access permissions at the folder level for individual users and groups
  • Toolbar action bar — persistent toolbar with contextually enabled actions (upload, create folder, rename, delete, download) that activate based on the current file or folder selection
  • Right-click context menu — native-feeling context menu surfacing file operation shortcuts on individual files and folders, mirroring desktop OS file manager conventions
  • Breadcrumb navigation — dynamic path breadcrumb reflecting the current directory location with clickable ancestor segments for fast traversal

File Operations & Preview

Implemented the full suite of file interaction workflows:

  • File preview modal — in-browser preview of images, documents, and supported file types without requiring download, with navigation between files in the current directory
  • File upload interface — drag-and-drop and browse-to-upload workflows with progress indicators and error handling for failed or oversized uploads
  • Inline rename — in-place file and folder rename triggered from the context menu and toolbar, with validation feedback for invalid characters and duplicate names
  • Delete confirmation — modal confirmation workflow for single and bulk file deletion with clear, recoverable messaging
  • AJAX-driven operations — all file and folder operations (add, edit, delete, move, permission change) reflected in the UI without full page reloads via jQuery AJAX and elFinder event hooks

Development Team Support

Supported the backend team through the full integration and delivery phase:

  • elFinder-compatible markup — HTML structure and CSS class naming aligned with elFinder’s DOM expectations from the first line of code, eliminating markup restructuring during integration
  • Dropbox data binding documentation — annotated markup indicating where dynamic file data, directory structures, and permission states would be injected by the backend
  • Integration support — hands-on assistance resolving elFinder event binding issues, Dropbox data rendering discrepancies, and CSS conflicts during the development environment integration phase
  • Cross-browser validation — tested and resolved rendering and behaviour inconsistencies across Chrome, Firefox, Internet Explorer, and Safari throughout the integration and QA phase
All projects