Static Files & Media Uploads

Two kinds of files

Every real site serves files that are not HTML pages. Django splits them into two clearly different groups, and mixing them up is a classic beginner trip-up:

Static files — your own CSS and JS

Static files are the assets you ship with the app. You put them in a static/ folder, then load them in templates with the {% static %} tag (which builds the correct URL for you). First, the setting and the folder:

# settings.py
STATIC_URL = "static/"                     # the URL prefix for static files
STATICFILES_DIRS = [BASE_DIR / "static"]   # project-wide static folder

# folder:  static/css/style.css

Now use it in a template. The {% load static %} line turns on the tag, and {% static "..." %} produces the right path:

<!-- templates/base.html -->
{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<img src="{% static 'images/logo.png' %}" alt="Logo">

collectstatic — gathering files for production

In development Django serves static files automatically. In production it does not — instead you run one command that copies every static file (yours plus Django’s own, like the admin’s CSS) into a single folder a web server can serve:

# settings.py
STATIC_ROOT = BASE_DIR / "staticfiles"   # the single output folder

# then, once before deploying:
python manage.py collectstatic

Media files — letting users upload

Media files are uploads from your visitors. To accept them you add a FileField (any file) or ImageField (pictures, with extra checks) to a model, and set two settings telling Django where to store them:

# settings.py
MEDIA_URL = "/media/"               # URL prefix for uploaded files
MEDIA_ROOT = BASE_DIR / "media"     # folder on disk where they are saved

# models.py
class Profile(models.Model):
    name = models.CharField(max_length=100)
    avatar = models.ImageField(upload_to="avatars/")
    # files land in  MEDIA_ROOT/avatars/

upload_to="avatars/" is the sub-folder inside MEDIA_ROOT where these images are saved. ImageField needs the Pillow image library — install it with pip install Pillow. (Remember to makemigrations and migrate after adding the field.)

The upload form needs one special attribute

A form that sends files must include enctype="multipart/form-data" — this tells the browser to package the file bytes, not just text. And the view must read request.FILES (not request.POST) for the file:

<!-- the upload form -->
<form method="post" enctype="multipart/form-data">
  {% csrf_token %}
  <input type="file" name="avatar">
  <button type="submit">Upload</button>
</form>

Putting the upload flow together, step by step:

1. The user picks a file and submits the form (which has enctype="multipart/form-data").
2. The browser sends the file bytes; Django puts them in request.FILES.
3. You save the model — Django writes the file into MEDIA_ROOT/avatars/ and stores its path in the database.
4. In a template you display it with <img src="{{ profile.avatar.url }}">, which uses MEDIA_URL to build the link.
5. During development add the media URL route so the file actually serves (the docs’ one-liner with static(settings.MEDIA_URL, ...) in urls.py).