File Manager

Overview

A File manager with React Frontend and Rails Backend. Allows users to manage their files and folders seamlessly. The app uses Minio for object storage, ensuring that the structure in the File Manager UI mirrors the structure in Minio, providing a reliable and intuitive user experience. Additionally, the app features real-time updates with ActionCable, allowing users to see changes immediately as they happen.

Features

• Authentication — sign up & sign in with JWT session handling (auto refresh on expiry).
• Folder Management — create, create nested, rename, move (drag-and-drop or menu), trash, permanently delete, listing.
• File Management — upload (dialog & drag-and-drop, multiple files), rename, move, preview, trash, permanently delete.
• Drag & Drop — drop files anywhere on Storage to upload, and drag rows onto a folder to move them.
• Upload Progress — Google-Drive-style progress bar toast while uploading.
• Thumbnails — image and video thumbnails (small/medium) shown in list and grid views.
• Media Support — images, common video formats (mp4, mov, webm, ...) and PDF, with an in-app preview modal.
• Layouts — list and grid views (persisted).
• Sorting & Filtering — sort by name, size or created date (asc/desc) and filter all / folders / files.
• File & Folder Size — columns that show per-file size and recursive folder totals.
• Storage Usage — total storage used, shown in the sidebar and updated in real time.
• Real-time Updates — ActionCable keeps the UI in sync (create / rename / move / remove / share).
• Sharing — share a file or folder with a specific existing user (autocomplete by email) or with anyone via a secure link; a Shared with me page (list/grid) with browse & download.
• Trash — soft-deleted items with permanent delete.
• Dark / Light theme.

Technology Stack

• React 18: Framework
• Zustand: State management library
• Shadcn: Component library
• ActionCable: Real-time updates
• Zod: Schema validation

Preview

Screenshots

Backend API Documentation

• When accessing BE documentation you need follow the steps

Setup

Prerequisites

Dependencies installed on your machine

• Node.js version 14.0.0 or higher
• Npm or Yarn

Installation Steps

1. Clone the repository:

   git clone https://github.com/voidzenn/file_manager_fe.git
   cd <repository-name>

2. Rename .env.example to .env:

   mv .env.example .env

3. Install dependencies:

   npm install
   # or 
   yarn install

4. Run the app:

   yarn dev

5. Access the web application:

   Open your browser and navigate to http://localhost:3001