Learn how to upload photos and videos from your phone directly to an AWS EC2 server using Python and FastAPI.

---

📌 Overview

One of the most common requirements in modern applications is the ability to upload files from a browser to a server.

Whether you’re building:

• A media management platform
• A document portal
• A machine learning application
• An image processing workflow
• A video processing pipeline
• A backup solution

The first step is always the same:

Get the file from the user’s device to your server.

In this tutorial, we’ll build a lightweight file upload application using:

• AWS EC2
• Amazon Linux 2023
• Python
• FastAPI
• HTML
• JavaScript

The result is a mobile-friendly web page that allows users to upload photos and videos directly to an EC2 instance.

Table of Contents

• 📌 Overview
• 🏗️ Final Architecture
• ☁️ Step 1: Launch an AWS EC2 Instance
• 🔑 Step 2: Connect to the Server
• 🔄 Step 3: Update the Server
• 📁 Step 4: Create the Project Directory
• 🐍 Step 5: Create a Python Virtual Environment
• 📦 Step 6: Install Dependencies
• 📂 Step 7: Create Required Directories
• ⚙️ Step 8: Build the Backend
• 🎨 Step 9: Build the Frontend
• 🚀 Step 10: Start the Application
• 🔥 Step 11: Configure AWS Security Groups
• 🐛 Real-World Debugging Lesson
• 📱 Testing the Application
• 📂 Verify Uploaded Files
• 📸 Suggested Screenshots
• 🔗 Source Code
• 🚀 Next Improvements
• Final Thoughts

---

🏗️ Final Architecture

Phone / Laptop
       │
       ▼
FastAPI Web UI
       │
       ▼
AWS EC2 Instance
       │
       ▼
uploads/

The workflow is intentionally simple:

1. User selects a file.
2. Browser uploads the file.
3. FastAPI receives the file.
4. File is saved to disk.

No database required.

No external storage required.

No frontend framework required.

---

☁️ Step 1: Launch an AWS EC2 Instance

Launch a new EC2 instance.

Instance Configuration

• Amazon Linux 2023
• t2.nano
• Public IPv4 Enabled

Create and download a new key pair.

Example:

MediaUploadServer.pem

---

🔑 Step 2: Connect to the Server

Connect using SSH:

ssh -i .\MediaUploadServer.pem ec2-user@13.220.113.175

---

Fixing “Unprotected Private Key” Errors on Windows

If Windows reports that your PEM file permissions are too open, run:

icacls .\MediaUploadServer.pem /inheritance:r
icacls .\MediaUploadServer.pem /grant:r "$($env:USERNAME):(R)"
icacls .\MediaUploadServer.pem /remove "Authenticated Users" "BUILTIN\Users" "Everyone"

Then reconnect.

---

🔄 Step 3: Update the Server

After logging in:

sudo yum update -y
sudo dnf update -y

Install Python:

sudo yum install python3 -y
sudo yum install python3-pip -y

Verify installation:

python3 --version

---

📁 Step 4: Create the Project Directory

Create a project folder:

mkdir uploader
cd uploader

---

🐍 Step 5: Create a Python Virtual Environment

Create a virtual environment:

python3 -m venv venv

Activate it:

source venv/bin/activate

Your terminal should now display:

(venv)

indicating that the virtual environment is active.

---

Why Use a Virtual Environment?

A virtual environment keeps project dependencies isolated from the operating system.

Without a virtual environment:

System Python
├── FastAPI
├── Django
├── NumPy
└── Other Projects

With a virtual environment:

uploader/
└── venv/

Everything stays self-contained.

---

Verify the Virtual Environment

Before activation:

which python3

Example:

/usr/bin/python3

After activation:

which python

Example:

/home/ec2-user/uploader/venv/bin/python

This confirms that Python commands are now using the virtual environment.

---

Leaving the Virtual Environment

When finished:

deactivate

---

Do You Need to Activate It Every Time?

For development:

cd uploader
source venv/bin/activate

Yes.

For production services, you can directly reference the virtual environment’s Python executable:

ExecStart=/home/ec2-user/uploader/venv/bin/uvicorn app:app --host 0.0.0.0 --port 8000

No manual activation required.

---

📦 Step 6: Install Dependencies

Install FastAPI and related packages:

pip install fastapi uvicorn python-multipart

Packages:

FastAPI

Python web framework.

Uvicorn

ASGI web server.

python-multipart

Required for file uploads.

---

Where Are Packages Installed?

Because we activated the virtual environment, packages are installed into:

uploader/venv/lib/python3.x/site-packages/

instead of:

/usr/lib/python3.x/

---

Save Dependencies

Generate a requirements file:

pip freeze > requirements.txt

Project structure:

uploader/
├── app.py
├── requirements.txt
├── uploads/
├── static/
└── venv/

---

📂 Step 7: Create Required Directories

Create storage folders:

mkdir uploads
mkdir static

---

⚙️ Step 8: Build the Backend

Create:

nano app.py

Paste:

from fastapi import FastAPI, UploadFile, File
from fastapi.responses import FileResponse
import os

app = FastAPI()

UPLOAD_DIR = "uploads"
os.makedirs(UPLOAD_DIR, exist_ok=True)

@app.get("/")
def home():
    return FileResponse("static/index.html")

@app.post("/upload")
async def upload(file: UploadFile = File(...)):
    filepath = os.path.join(UPLOAD_DIR, file.filename)

    with open(filepath, "wb") as f:
        f.write(await file.read())

    return {
        "success": True,
        "filename": file.filename
    }

---

📝 Nano Editor Tips

To save:

CTRL + O
Enter

To exit:

CTRL + X

Save and exit sequence:

CTRL + O
Enter
CTRL + X

---

🎨 Step 9: Build the Frontend

Create:

nano static/index.html

Paste:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Uploader</title>
</head>
<body>

<h2>Upload Photo or Video</h2>

<input type="file" id="file">

<br><br>

<button onclick="uploadFile()">
Upload
</button>

<p id="status"></p>

<script>
async function uploadFile() {
    const file = document.getElementById("file").files[0];

    if (!file) {
        alert("Select a file");
        return;
    }

    const formData = new FormData();
    formData.append("file", file);

    document.getElementById("status").innerText = "Uploading...";

    const response = await fetch("/upload", {
        method: "POST",
        body: formData
    });

    const result = await response.json();

    document.getElementById("status").innerText =
        "Uploaded: " + result.filename;
}
</script>

</body>
</html>

---

🚀 Step 10: Start the Application

Run:

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

Expected output:

Uvicorn running on http://0.0.0.0:8000

---

🔥 Step 11: Configure AWS Security Groups

This step is critical.

Open the EC2 Security Group.

Add:

Type: Custom TCP
Port: 8000
Source: 0.0.0.0/0

---

🐛 Real-World Debugging Lesson

The application initially failed to load from the browser.

Everything appeared correct:

✅ FastAPI running

✅ Uvicorn listening

✅ Public IP assigned

✅ Route Table configured

✅ Network ACL configured

Yet the browser timed out.

After investigating, the issue turned out to be:

Security Group Port: 8080
Application Port:   8000

The Security Group was opening port 8080 while FastAPI was running on port 8000.

Once port 8000 was added to the Security Group, the application became accessible immediately.

A great reminder that networking issues are often caused by small configuration mismatches.

---

📱 Testing the Application

Open:

http://YOUR_PUBLIC_IP:8000

From:

• Android
• iPhone
• Laptop
• Tablet

Select a photo or video.

Press Upload.

Success!

---

📂 Verify Uploaded Files

On the server:

ls -lh uploads

Example:

reel+aud.mp4

The uploaded file is now stored on the EC2 instance.

---

📸 Suggested Screenshots

Add screenshots for:

AWS EC2 Instance

[Insert Screenshot]

SSH Connection

[Insert Screenshot]

Virtual Environment

[Insert Screenshot]

FastAPI Running

[Insert Screenshot]

Security Group Configuration

[Insert Screenshot]

Upload Page

[Insert Screenshot]

Successful Upload

[Insert Screenshot]

---

🔗 Source Code

GitHub Repository:

[Insert GitHub Link]

---

🚀 Next Improvements

Once the upload pipeline is working, you can extend it in many ways:

• Upload progress bars
• Multiple file uploads
• Drag-and-drop support
• Authentication
• User accounts
• HTTPS with Nginx
• Domain names
• Cloud storage integration
• Image optimization
• Video processing
• AI-powered file analysis

The possibilities are endless.

---

Final Thoughts

Building a file upload server doesn’t need to be complicated.

With a small EC2 instance, FastAPI, and a few lines of HTML and JavaScript, it’s possible to create a functional upload system in less than an hour.

The final result is a lightweight, mobile-friendly upload service that can serve as the foundation for countless applications and workflows.

Sometimes the best approach is to start with the simplest working version and build from there.