Feature - complete file and folder management with docker compose

[dayal18]

🚀 Feature: File Management Enhancements (Create, Rename, Recursive Delete)

📝 Summary

This update introduces robust file management capabilities to the web interface, transforming it from a simple uploader/viewer into a fully functional file browser. Users can now create directories, rename files/folders inline, and recursively delete directories directly from the UI. Native browser dialogs have been completely replaced with elegant SweetAlert2 modals for a consistent, modern UX.

⚙️ Backend Updates (packages/lib/src/index.ts)

• New Directory Creation: Added a POST /api/mkdir endpoint that securely resolves paths and sanitizes inputs (using filenamify) to create new directories.
• Item Renaming: Added a POST /api/rename endpoint to handle renaming operations for both files and directories, complete with root-folder protection.
• Recursive Deletion: Upgraded the existing DELETE /api/delete endpoint. Replaced fs.unlink with fs.rm({ recursive: true, force: true }) to safely support deleting both individual files and non-empty directories.

🖥️ Frontend Updates (packages/web/src/routes/dir/$dirId.tsx)

• "New Folder" Action: Integrated a new button in the directory header to instantly create empty folders within the current working directory.
• Inline Editing Mode: Upgraded the <FileRow /> component to support an interactive edit mode. Users can now click the FaEdit icon to transform the row into a text input.
• Smart Text Selection: Added a UX enhancement to the rename input: when editing a file with an extension, the input automatically highlights only the file name, protecting the extension from accidental deletion while keeping it fully editable.
• Keyboard Accessibility: Added keyboard event listeners in edit mode (Enter to save, Escape to cancel).
• Consistent Modals (SweetAlert2): * Replaced the native, blocking window.confirm for deletions with a custom-styled Swal.fire modal.
  • Used Swal.fire with an inputValidator for the New Folder prompt to prevent empty directory names.

🖼️ UI/UX Improvements

• Added visual cues for destructive actions (e.g., red confirmation buttons for deletion).
• Added new intuitive icons from react-icons/fa (FaEdit, FaFolderPlus, FaCheck, FaTimes) to clearly indicate the new file management actions.

🐳 Docker Deployment

You can run ezshare easily using Docker. This ensures all dependencies like ffmpeg and xvfb are pre-installed and configured correctly.

Prerequisites

• Docker Desktop or Docker Engine installed.

Option 1: Using Docker Compose (Recommended)

The easiest way to run the application is with Docker Compose. This handles the build, port mapping, and volume creation automatically.

1. Start the application:

   docker compose up --build

2. Access the app:
   Open your browser to http://localhost:3003.

3. Shared Files:
   Place files in the ./my-shared-data folder (created automatically in your project root). These will appear in the application under /shared.

Volume Permissions (Important)

Since the container now runs as UID 1000 (node), the host directory mounted to /shared (defined in docker-compose.yml as ./my-shared-data) must be writable by UID 1000.

If you encounter Permission Denied errors on Linux/Mac, run the following on the host machine to fix local folder permissions:

mkdir -p ./my-shared-data
chown -R 1000:1000 ./my-shared-data

Option 2: Manual Docker CLI

If you prefer to run the Dockerfile manually without Compose:

1. Build the image:

   docker build -t ezshare .

2. Run the container:
   You must map port 3003 and mount a volume to /shared for the application to function properly.

   docker run -p 3003:3003 -v $(pwd)/my-shared-data:/shared ezshare

Configuration Details

• Port: The application listens on port 3003 by default.
• Data Volume: The application expects a volume mounted at /shared to store and retrieve files.
• Environment: The container uses node:20-slim and includes necessary runtime tools like ffmpeg for media processing.