An In-Browser Local & FTP File Navigator & Editor

jQuery JavaScript CSS HTML PHP Web Design

This is an old project of mine that, unfortunately, didn't get finished. It's about 80% done.

It started as a simple proof of concept for somebody that asked for a way to list the contents of a directory with PHP and AJAX. It had no design initially.

Working on it made me think: How far can I go?

I knew that I could list the names of the files and create a way to link them together through a custom API and AJAX, but I was interested if I could actually develop a fully featured web-based file navigator and editor.

So I started adding features such as:

  • File sizes and modification dates (Preview)
  • Custom icons based on the type of the files (Preview)
  • A text & code file editor (Preview)
  • A clickable breadcrumb module (Preview) - Clicking on any of the locations takes you to the location. It's also directly editable (Preview).
  • Navigation links: Back, Forward, Refresh, Up one level, Home (Preview)
  • Ability to store bookmarks or links to favorite locations (Preview)
  • Ability to create a new directory or file (Preview)
  • Ability to delete the current directory recursively (Preview)
  • Ability to search the current directory recursively (Preview)
    • This feature turned out to be a challenge, to search and display files based on the matched criteria, or parts of the match criteria. E.g.: If one wants to search for the terms "php is awesome", it will search for "php is awesome" first, then for "php" or "awesome" next, then for files matching "p" and "h" and "p" in that order, then for files matching "a" and "w" and "e" and "s" and "o" and "m" and "e" in that order.
  • Ability to download as Zip the current directory (Preview)
  • Ability to upload to the current directory (Preview)
  • Custom context menu when right clicking on a file or directory (Preview)
  • Ability to flag some files or directories in a specific location to make them stand out (Preview)
  • Different environments (Preview)
    • An environment is the source of content tht you want to navigate through. It can be either a specific location on disk, or a FTP location.
  • A full CRUD admin control panel
    • Dashboard (Preview)
    • Environments Manager (Preview)
    • Users Manager (Preview)
    • User Roles Manager (Preview)
      • This allows to create roles for users to specify what environments they have access to and what actions (create files, edit files, delete, download, etc).
    • Logs (Preview)
      • A list of all the actions taken by all the users in every location
    • Settings (Preview)

Preview Images (Click to enlarge)