Personal Cloud File Manager

A personal web-based file manager built with Python FastAPI, HTML, CSS, and JavaScript.

This project allows a user to browse selected local drives from a browser-based interface. It was built as a personal cloud-style file explorer for accessing files from a PC through a clean and mobile-friendly web UI.

Overview

Personal Cloud File Manager works by running a FastAPI server on the computer. The backend reads selected local drives and sends folder/file information to the frontend. The frontend displays the files and folders in a modern grid layout and allows the user to navigate through folders or open/download files from the browser.

This project was built for learning and personal use.

Features

• Browse local PC drives from a web browser
• Supports selected drives: C, D, and E
• Modern Windows 11 inspired user interface
• Mobile-friendly responsive layout
• Home and Back navigation
• Folder browsing
• File opening/downloading through browser
• FastAPI backend
• Vanilla HTML, CSS, and JavaScript frontend
• Basic path validation to restrict access to allowed drives
• Handles restricted Windows folders gracefully

Tech Stack

• Python
• FastAPI
• Uvicorn
• HTML
• CSS
• JavaScript
• Git
• GitHub

Project Structure

PersonalCloud/
│
├── main.py
├── index.html
├── requirements.txt
├── .gitignore
└── README.md

How It Works

The backend is built with FastAPI.

• / serves the frontend HTML page.
• /api/files returns folders and files from allowed drives.
• /api/download opens or downloads selected files.
• The frontend uses JavaScript fetch() to request file data from the backend.
• The interface updates dynamically when the user clicks folders or navigation buttons.

Installation

1. Clone the Repository

git clone https://github.com/AhnafSHL/personal-cloud-file-manager.git

2. Go to the Project Folder

cd personal-cloud-file-manager

3. Create a Virtual Environment

python -m venv venv

4. Activate the Virtual Environment

On Windows PowerShell:

.\venv\Scripts\activate

If PowerShell blocks script activation, use:

Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass
.\venv\Scripts\activate

5. Install Dependencies

pip install -r requirements.txt

Running the App

Run the FastAPI server:

uvicorn main:app --host 0.0.0.0 --port 8000

Then open the app in your browser:

http://127.0.0.1:8000

Remote Access Note

This project can be accessed remotely through a private network tool such as Tailscale.

For safety, this app should not be exposed directly to the public internet without proper authentication, authorization, HTTPS, and additional security controls.

Security Notes

This project can access local computer drives, so security is very important.

Current safety measures include:

• Only selected drives are allowed.
• Path validation is used to reduce unsafe access.
• Restricted folders are skipped when permission errors occur.
• No delete, upload, or file modification feature is included.

Recommended future improvements:

• Add login authentication
• Add user session management
• Add stronger access control
• Add HTTPS for secure browser access
• Add read-only mode confirmation
• Add logging and error monitoring
• Allow users to configure allowed folders instead of full drives

Future Improvements

• Add login page
• Add password protection
• Add search option
• Add file preview for images, PDFs, and videos
• Add dark mode
• Add upload feature with permission control
• Add folder-only access instead of full drive access
• Improve UI animations
• Add project screenshots to README

What I Learned

Through this project, I practiced:

• Building APIs with FastAPI
• Serving frontend files from a Python backend
• Using JavaScript to fetch backend data
• Handling local file system operations
• Designing a responsive web interface
• Understanding private remote access using a secure network
• Managing a project with Git and GitHub

Disclaimer

This project is for educational and personal use only. It should not be used as a public file server without proper security implementation.