Static & Media Files0%
Static & Media Files
Beginner12 min read•Updated: Jul 11, 2026
Static & Media Files
In Django architecture, Static Files and Media Files serve two completely different purposes:
- Static Files: Assets authored and committed by developers (CSS stylesheets, JavaScript bundles, site logos, SVG icons).
- Media Files: User-uploaded content (user profile avatars, PDF invoices, product catalog images, video attachments).
In ephemeral cloud environments (Heroku, Kubernetes, AWS ECS), container file systems are destroyed upon restart. Storing user media files on the container disk causes data loss. Enterprise systems offload static and media storage to cloud object stores like Amazon S3 using django-storages.
1. Static vs Media Files Overview
| Category | Authored By | Source Control | Storage in Production | Example |
|---|---|---|---|---|
| Static Files | Developers | Committed to Git | WhiteNoise or AWS S3 / CDN | css/styles.css, bundle.js |
| Media Files | End Users | Never committed to Git | Cloud Object Store (AWS S3) | avatars/user_42.jpg, doc.pdf |
2. Configuring django-storages with AWS S3
Bash / Terminal
pip install django-storages boto3
Configure AWS credentials and custom storage backends:
Python
# config/settings.py
INSTALLED_APPS = [
# ...
"storages", # Adds S3 backend support
]
# AWS S3 Credentials (Injected from Environment Variables)
AWS_ACCESS_KEY_ID = os.environ.get("AWS_ACCESS_KEY_ID")
AWS_SECRET_ACCESS_KEY = os.environ.get("AWS_SECRET_ACCESS_KEY")
AWS_STORAGE_BUCKET_NAME = os.environ.get("AWS_STORAGE_BUCKET_NAME")
AWS_S3_REGION_NAME = os.environ.get("AWS_S3_REGION_NAME", "us-east-1")
AWS_S3_CUSTOM_DOMAIN = f"{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com"
# S3 Security & Performance Options
AWS_DEFAULT_ACL = None # Enforces AWS bucket ownership controls
AWS_S3_OBJECT_PARAMETERS = {
"CacheControl": "max-age=86400",
}
# 1. Custom Media Storage Backend (User Uploads)
DEFAULT_FILE_STORAGE = "config.storage_backends.MediaStorage"
# 2. Custom Static Storage Backend (Optional: offload static to S3)
STATICFILES_STORAGE = "config.storage_backends.StaticStorage"
3. Custom Storage Backends (storage_backends.py)
Isolate static assets and media files into separate folders inside the same S3 bucket:
Python
# config/storage_backends.py
from storages.backends.s3boto3 import S3Boto3Storage
class StaticStorage(S3Boto3Storage):
location = "static"
default_acl = "public-read"
class MediaStorage(S3Boto3Storage):
location = "media"
file_overwrite = False # Appends random suffix if filename conflicts!
4. Handling File Uploads in Models
Python
# accounts/models.py
from django.db import models
def user_avatar_path(instance, filename):
# Dynamic storage path: media/avatars/user_123/profile.jpg
return f"avatars/user_{instance.id}/{filename}"
class UserProfile(models.Model):
user = models.OneToOneField(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
avatar = models.ImageField(upload_to=user_avatar_path, blank=True, null=True)
resume = models.FileField(upload_to="resumes/", blank=True, null=True)
In templates, access the public S3 URL via .url:
DJANGO
{% if profile.avatar %}
<img src="{{ profile.avatar.url }}" alt="Profile Photo" class="h-12 w-12 rounded-full" />
{% endif %}
Interactive Quiz
Practice Quiz
Question 1
What is the critical difference between Static Files and Media Files in Django?
Question 2
Why is storing user uploads on local container disks an anti-pattern in Docker / Heroku deployments?
Question 3
What does setting file_overwrite = False do in custom S3 media storage?
Question 4
What package is the standard backend for integrating Django with cloud storage providers like AWS S3, Azure Blob, and Google Cloud Storage?
Question 5
How do you output the public URL of an uploaded ImageField named avatar in a Django template?
Next Lesson
Environment Variables & Secrets
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Related Lessons
| Previous Lesson | Next Lesson |
|---|---|
| Deploying to Heroku | Environment Variables & Secrets |
Practice Quiz
Test your understanding of this lesson with 5 questions. Each question has one correct answer.