MEDIA_URL and MEDIA_ROOT in Django - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the purpose of MEDIA_ROOT in Django?

In a Django project, what does the MEDIA_ROOT setting specify?

A The directory where static files like CSS and JavaScript are collected.

B The URL path where media files are accessed by users.

C The template directory for rendering media content.

D The absolute filesystem path where uploaded media files are stored.

💡 Hint

Think about where files physically live on your computer or server.

MEDIA_ROOT is the absolute path on your server where Django saves uploaded files. It is not a URL but a filesystem location.

🧠 Conceptual

intermediate

What does MEDIA_URL control in Django?

In Django settings, what is the role of MEDIA_URL?

A It defines the URL prefix used to serve media files to users.

B It sets the filesystem path where media files are saved.

C It configures the database location for media metadata.

D It specifies the URL for static files like images and CSS.

💡 Hint

Think about how users access uploaded files via a web address.

MEDIA_URL is the URL prefix that browsers use to access media files. It usually starts with a slash and points to the location served by the web server.

❓ component_behavior

advanced

What happens if MEDIA_ROOT is not set correctly?

Consider a Django project where MEDIA_ROOT is set to a non-existent directory. What will happen when a user uploads a file?

A Django raises an error when trying to save the uploaded file.

B The file uploads but is saved in a temporary system folder.

C The file is saved in the default static files directory instead.

D The file uploads successfully but cannot be accessed via MEDIA_URL.

💡 Hint

Think about what happens if the folder to save files does not exist.

If MEDIA_ROOT points to a folder that does not exist, Django cannot save the uploaded file and raises an error, usually a FileNotFoundError or IOError.

📝 Syntax

advanced

Identify the correct MEDIA_URL and MEDIA_ROOT settings

Which of the following Django settings correctly configures MEDIA_URL and MEDIA_ROOT for serving user-uploaded files?

A

MEDIA_URL = '/static/media/'
MEDIA_ROOT = 'media/'

B

MEDIA_URL = 'media/'
MEDIA_ROOT = '/media/'

C

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

D

MEDIA_URL = '/media'
MEDIA_ROOT = os.path.join(BASE_DIR, 'static/media')

💡 Hint

MEDIA_URL should start and end with a slash, and MEDIA_ROOT should be an absolute path.

Correct settings use a URL path starting and ending with slashes for MEDIA_URL and an absolute filesystem path for MEDIA_ROOT. Option C follows this pattern.

❓ state_output

expert

What is the output of this Django media URL usage?

Given the following Django settings and template snippet, what will be the rendered HTML output for the image tag if the uploaded file is named 'photo.jpg'?

Django

settings.py:
MEDIA_URL = '/media/'
MEDIA_ROOT = '/var/www/myproject/media'

models.py:
class Photo(models.Model):
    image = models.ImageField(upload_to='uploads/')

Template snippet:
<img src="{{ photo.image.url }}" alt="User photo">

A <img src="/var/www/myproject/media/uploads/photo.jpg" alt="User photo">

B <img src="/media/uploads/photo.jpg" alt="User photo">

C <img src="uploads/photo.jpg" alt="User photo">

D <img src="/static/uploads/photo.jpg" alt="User photo">

💡 Hint

Remember that image.url uses MEDIA_URL as the base URL path.

The image.url property combines MEDIA_URL with the file's relative path inside MEDIA_ROOT. So the URL is '/media/uploads/photo.jpg'.

Practice

1. What does MEDIA_URL represent in a Django project?

easy

A. The folder path where Django stores static files

B. The URL prefix used to access media files in the browser

C. The database table for storing media file info

D. The Python module for handling media uploads

Solution

1. Step 1: Understand MEDIA_URL purpose

   MEDIA_URL is used to define the URL prefix that browsers use to access media files uploaded by users.

2. Step 2: Differentiate from MEDIA_ROOT

   MEDIA_ROOT is the folder path on the server, not a URL. Static files and database tables are unrelated here.

3. Final Answer:

   The URL prefix used to access media files in the browser -> Option B

4. Quick Check:

   MEDIA_URL = URL prefix [OK]

Hint: MEDIA_URL is always a URL path, not a folder path [OK]

Common Mistakes:

• Confusing MEDIA_URL with MEDIA_ROOT
• Thinking MEDIA_URL is a folder path
• Mixing MEDIA_URL with static files settings

2. Which of the following is the correct way to set MEDIA_ROOT in Django's settings.py?

easy

A. MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

B. MEDIA_ROOT = 'static/media/'

C. MEDIA_ROOT = 'http://example.com/media/'

D. MEDIA_ROOT = '/media/'

Solution

1. Step 1: Understand MEDIA_ROOT type

   MEDIA_ROOT must be a filesystem path, not a URL or relative URL string.

2. Step 2: Check correct syntax

   Using os.path.join(BASE_DIR, 'media') correctly builds an absolute path inside the project folder.

3. Final Answer:

   MEDIA_ROOT = os.path.join(BASE_DIR, 'media') -> Option A

4. Quick Check:

   MEDIA_ROOT = absolute folder path [OK]

Hint: MEDIA_ROOT is a folder path, use os.path.join for safety [OK]

Common Mistakes:

• Setting MEDIA_ROOT as a URL string
• Using relative paths without BASE_DIR
• Confusing MEDIA_ROOT with MEDIA_URL

3. Given the settings:
MEDIA_URL = '/media/'
MEDIA_ROOT = '/var/www/myproject/media/'
What URL will serve the file stored at /var/www/myproject/media/photos/pic.jpg?

medium

A. http://example.com/media/photos/pic.jpg

B. http://example.com/photos/pic.jpg

C. http://example.com/static/photos/pic.jpg

D. http://example.com/media_root/photos/pic.jpg

Solution

1. Step 1: Match file path to MEDIA_ROOT

   The file is inside /var/www/myproject/media/, which matches MEDIA_ROOT.

2. Step 2: Combine MEDIA_URL with relative file path

   The URL to access the file is MEDIA_URL + 'photos/pic.jpg' = /media/photos/pic.jpg.

3. Final Answer:

   http://example.com/media/photos/pic.jpg -> Option A

4. Quick Check:

   MEDIA_URL + relative path = URL [OK]

Hint: URL = MEDIA_URL + file path relative to MEDIA_ROOT [OK]

Common Mistakes:

• Using MEDIA_ROOT as URL prefix
• Confusing static files URL with media URL
• Omitting MEDIA_URL prefix

4. You set MEDIA_URL = '/media/' and MEDIA_ROOT = 'media/' in settings.py. When you upload files, they are not accessible via browser. What is the likely problem?

medium

A. MEDIA_URL must end with a file extension

B. MEDIA_URL should be a filesystem path

C. MEDIA_ROOT and MEDIA_URL cannot have the same name

D. MEDIA_ROOT should be an absolute path, not relative

Solution

1. Step 1: Check MEDIA_ROOT path type

   MEDIA_ROOT must be an absolute path to the folder on disk, not a relative path.

2. Step 2: Understand impact on file serving

   Using a relative path can cause Django or the web server to fail to find the files, making them inaccessible.

3. Final Answer:

   MEDIA_ROOT should be an absolute path, not relative -> Option D

4. Quick Check:

   MEDIA_ROOT = absolute path [OK]

Hint: Always use absolute path for MEDIA_ROOT [OK]

Common Mistakes:

• Using relative paths for MEDIA_ROOT
• Expecting MEDIA_URL to be a folder path
• Not configuring web server to serve media files

5. You want to serve user-uploaded images stored in /home/user/project/media/ at URL prefix /uploads/. Which settings.py configuration is correct?

hard

A. MEDIA_ROOT = '/home/user/project/media/'
MEDIA_URL = '/media/'

B. MEDIA_ROOT = '/uploads/'
MEDIA_URL = '/home/user/project/media/'

C. MEDIA_ROOT = '/home/user/project/media/'
MEDIA_URL = '/uploads/'

D. MEDIA_ROOT = 'media/'
MEDIA_URL = '/uploads/'

Solution

1. Step 1: Match folder path to MEDIA_ROOT

   The folder /home/user/project/media/ is the physical location of files, so it must be set as MEDIA_ROOT.

2. Step 2: Set URL prefix to /uploads/

   To serve files at /uploads/, set MEDIA_URL = '/uploads/'.

3. Final Answer:

   MEDIA_ROOT = '/home/user/project/media/' and MEDIA_URL = '/uploads/' -> Option C

4. Quick Check:

   MEDIA_ROOT = folder path, MEDIA_URL = URL prefix [OK]

Hint: MEDIA_ROOT = folder, MEDIA_URL = URL prefix you want [OK]

Common Mistakes:

• Swapping MEDIA_ROOT and MEDIA_URL values
• Using relative path for MEDIA_ROOT
• Not matching URL prefix with desired access path