FileManager Quick Reference

FileManager Quick Reference

Dual-filesystem manager for OpenForum - browser localStorage and server storage.

Overview

  • Manage files in both browser localStorage (browser://) and server filesystem (/OpenForum/Users/)
  • View, upload, download, rename, and delete files in both locations
  • Navigate folder hierarchies with expandable directory trees
  • Use standalone at /OpenForum/AddOn/FileManager or embed as a popup

Using the Standalone Page

  • Navigate to /OpenForum/AddOn/FileManager
  • Two panels display: Browser Filesystem (left) and Server Filesystem (right)
  • Click folders to expand/collapse; click files to see details and actions
  • Use buttons to create folders, upload files, and refresh listings

Browser Filesystem (LocalStorage)

  • Location: browser:// - stored in browser localStorage
  • Persistence: Stays local to your browser; not synced across devices
  • Capacity: Usually 5-10 MB per domain (browser-dependent)
  • Use cases: Client-side caching, offline drafts, temporary work
  • Actions: Create folders, upload files, download, rename, delete
  • Path format: browser://folderName/fileName.ext

Server Filesystem

  • Location: /OpenForum/Users/{username} on the server
  • Authentication: Requires login; guests see a sign-up prompt
  • Persistence: Permanent server storage; accessible from any device
  • Actions: Create folders, upload files, download, rename, delete
  • Path format: /OpenForum/Users/Admin/WorkSpace/file.txt

File Operations

  • Upload: Click "Upload File" button, then select file from your computer
  • Download: Click file to open popup, then click "Download" button
  • Rename: Click file to open popup, then click "Rename" button
  • Delete: Click file to open popup, then click "Delete" button (confirms before deletion)
  • Select: Click green "Select" button to use file in integrations

Folder Operations

  • Create folder: Click "New Folder" button and enter name
  • Expand/Collapse: Click ▶/▼ arrow next to folder name
  • Select folder: Click folder name (not arrow) to open folder actions popup
  • Upload to folder: In folder popup, click "Upload File Here"
  • Create subfolder: In folder popup, click "Create Subfolder"
  • Delete folder: In folder popup, click "Delete Folder" (confirms before deletion)

Integrating FileManager as a Popup

Embed FileManager in your own pages for file selection. See FileManagerPopupExample for complete code.

Basic Setup

// Include the FileManager script
OpenForum.includeScript("/OpenForum/AddOn/FileManager/file-manager.js");

// Create a popup container
var popup = document.createElement('div');
popup.className = 'file-manager-popup';
popup.id = 'fileManagerPopup';
popup.innerHTML =
  '<div class="file-manager-popup-content">' +
  '  <div id="popupFileManagerContainer"></div>' +
  '</div>';
document.body.appendChild(popup);

// Create FileManager instance
var popupFileManager = new FileManager();
popupFileManager.createView('popupFileManagerContainer');

// Handle file selection
popupFileManager.onFileSelected = function(filePath, isBrowser) {
  console.log('Selected:', filePath);
  // Your logic here
};

// Initialize
popupFileManager.init();

FileManager API

Creating an Instance

var fm = new FileManager();
fm.createView('containerId');  // Load UI into element
fm.init();                     // Initialize and render

Callback Properties

  • fm.onFileSelected = function(filePath, isBrowser) - Called when user clicks Select button
  • filePath - Full path like "browser://folder/file.txt" or "/OpenForum/Users/Admin/file.txt"
  • isBrowser - true for browser:// files, false for server files

Instance Methods

  • fm.refreshBrowserFiles() - Reload browser filesystem listing
  • fm.refreshServerFiles() - Reload server filesystem listing
  • fm.navigateBrowserTo(path) - Navigate to browser folder path
  • fm.navigateServerTo(path) - Navigate to server folder path

Multiple Instances

  • You can create multiple FileManager instances on the same page
  • Each instance is independent with its own state and callbacks
  • Example: One popup instance and one inline instance running simultaneously
  • Instance isolation ensures onclick handlers call the correct instance

Styling the Popup

Customize the popup appearance with CSS:

.file-manager-popup {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-manager-popup-content {
  background: white;
  border-radius: 5px;
  padding: 20px;
  width: 90%;
  max-width: 1200px;
  height: 80%;
  overflow: auto;
}

Common Use Cases

  • File picker: Let users select a file from browser or server storage
  • Draft manager: Save work-in-progress to browser:// before server upload
  • Offline editing: Work with files in localStorage when offline
  • File browser: Browse and manage user workspace on server
  • Import/Export: Upload files to server or download for backup

Tips & Limitations

  • Browser storage limits: LocalStorage typically caps at 5-10 MB; use server for large files
  • Binary files: Currently text-based; binary file support may be limited
  • Path separators: Browser paths use / but don't require leading slash at root
  • Authentication: Server access requires login; browser access is always available
  • Clearing storage: Browser localStorage can be cleared by browser settings
  • File formats: All file types supported; .js, .json, .html, .xml, .txt tested extensively

Examples