PX File Manager

PX File Manager adds a full-screen file explorer to Components » PX File. It works on the files of the Joomla site it is installed on and never goes outside the site root. In the Joomla administrator it is listed as PX File.

• Explorer: folder tree, sortable file list, breadcrumb and an instant filter.
• Site-wide search: find files or folders by path tokens, e.g. com_content article.
• Code editor: the Monaco editor (the editor behind VS Code) with syntax highlighting for PHP, JS, TS/TSX, CSS/SCSS, XML, INI, SQL, YAML and more.
• Tabs: open several files at once and switch between them.
• File operations: new file/folder, upload, rename, copy, cut, paste, delete, download.
• Zip tools: compress a selection to .zip and extract archives in place.
• Permissions: change file modes (chmod) with a checkbox grid.
• Image preview and file properties (size, dates, paths, mode).
• Joomla ACL: separate permissions for view, create, edit and delete.

System requirement

• Joomla 4.4, 5.x or 6.x
• PHP 8.1 or later
• PHP zip extension (ZipArchive), needed for Compress and Extract
• A modern browser: the latest Chrome, Firefox, Safari or Edge

Install the package

1. Download the com_pxfile.zip package from your account on thepixel.dev.
2. In the Joomla administrator, go to System » Install » Extensions.
3. Open the Upload Package File tab 1 and drop the zip file into the upload area 2.

Open PX File Manager

After installation, open Components » PX File.

By default only Super Users can open PX File Manager. To give other groups access, see Permissions (ACL).

1. 1Tabs: Explorer is always the first tab. Every file you open gets its own tab.
2. 2Sidebar toolbar: search, create, collapse tree, help and settings.
3. 3Folder tree: the whole site from Root. Click the arrow to expand a folder, click a name to open it, right-click for the context menu.
4. 4Explorer toolbar: Back, Upload, New file, New folder, Refresh. A Paste button appears here when you copy or cut items.
5. 5Filter: narrows the list of the current folder as you type.
6. 6File list: name, type, size, modified date and permission of each item. Click a column header to sort.

Sidebar toolbar

1. 1Search files: search the whole site (see Search).
2. 2New file: create a file in the current folder.
3. 3New folder: create a folder in the current folder.
4. 4Collapse all: close every expanded folder in the tree.
5. 5Keyboard and mouse guide: list of shortcuts (see Keyboard & mouse).
6. 6Component settings: opens the PX File Options.

• Double-click a folder to open it, or a file to open it in a new tab.
• Use the breadcrumb above the toolbar to jump to any parent folder, or Back to return to the previous folder.
• Click Name, Size or Modified to sort the list. Click again to reverse the order.
• Refresh reloads the current folder from disk.

Filter the current folder

Type in Filter this folder… to show only the items whose name contains the text. Press Esc or click × to clear it. The filter only looks at the folder you are in; to look through the whole site, use Search.

Click the search icon in the sidebar toolbar to search every file of the site.

1. 1Files / Folders: choose what to look for.
2. 2Query: type a path or a few words separated by spaces or /, then press Enter. Every word must appear in the path, in any order. Example: src/components/SearchModal.tsx or com_content article.
3. 3Results: click a file to open it in a tab, or a folder to open it in the Explorer.

If you get too many results, the list is cut and a note asks you to add more words. Folders such as /cache and /.git are skipped; you can change this list in Options » Search.

New file and new folder

Click New file or New folder in the toolbar, type a name and confirm. The item is created in the folder you are viewing. Double-click the new file to start editing it.

Upload files

Click Upload, then drop files into the box or click it to pick files. Files upload one at a time into the current folder and each one shows its own progress and status. A file whose name already exists in the folder is not replaced; it is marked Failed. Rename or delete the existing file first.

• Click selects one item.
• Ctrl/⌘ + Click adds an item to the selection or removes it.
• Shift + Click selects a range, following the current sort and filter.

Press Ctrl/⌘+C to copy or Ctrl/⌘+X to cut (you can also use the context menu). A blue Paste (n) button appears in the toolbar. Open the destination folder and click it, or press Ctrl/⌘+V.

• If a name already exists in the destination, choose Override or Keep both (the new copy gets - Copy added to its name).
• Cutting and pasting into the same folder does nothing; open another folder first.
• A folder cannot be pasted into itself or one of its subfolders.
• Esc clears the selection and the clipboard.

Right-click any file or folder, in the list or in the tree, to see what you can do with it.

Compress

Select one or more items, right-click and choose Compress. Enter a name for the archive and click Compress. The zip is saved in the current folder.

Very large selections can hit the PHP memory_limit of your server. If that happens, compress fewer files at a time.

Extract

Right-click a .zip file and choose Extract. Leave the destination name empty to extract into the current folder, or enter a folder name to extract into a new folder. If files from the zip already exist, you can Overwrite them or Keep both (the extracted file gets a number, e.g. name (1).txt).

Double-click a text file to open it in a new tab with the code editor.

File toolbar

• A tab with unsaved changes shows a dot; closing it asks before discarding the changes.
• Middle-click a tab to close it. Use the arrows at both ends of the tab bar when many tabs are open.
• Images (JPG, PNG, GIF, WebP, AVIF, BMP, ICO…) open as a preview. SVG files open as text because they can contain scripts.
• Binary files cannot be opened in the editor. Use Download instead.

Copy a file URL

Properties

Right-click a file or folder and choose Permission. Tick Read, Write and Execute for Owner, Group and Other; the octal mode (e.g. 0644) updates as you click. Setuid, Setgid and Sticky are available for advanced cases.

Changing permissions only works if the web server user owns the file. On some hosts this is not allowed and PX File Manager shows an error.

Click the i icon in the sidebar toolbar any time to see this guide. On Mac use ⌘; on Windows and Linux use Ctrl.

Explorer shortcuts are paused while you type in a field or in the editor.

Click the gear icon in the sidebar toolbar, or go to System » Global Configuration » PX File.

Search

Ignore folders: folders that Search skips. Separate entries with commas or new lines.

• A path such as /cache or /administrator/logs skips that folder and everything under it.
• A plain name such as node_modules skips every folder with that name.
• Default: /.git,/cache,/logs,/administrator/cache,/administrator/logs

Editor

Font size: editor font size in pixels, from 8 to 40. Default: 13.

Permissions (ACL)

Choose who can use PX File Manager and what they can do. Select a user group 1, then set the PX File Manager actions 2.

• Move (cut and paste) needs both Create and Delete.
• Override on paste needs Delete; overwriting files while extracting needs Edit and Delete.

To upgrade, install the new com_pxfile.zip through System » Install » Extensions, exactly as in Install the package. Your Options and permissions are kept.