Django MEDIA_ROOT, MEDIA_URL etc

Question

This is my first time using MEDIA_ROOT/MEDIA_URL and I'm a little confused by the configuration. I have an image upload form which saves the original image plus a resized copy. I want to save both images to my MEDIA folder, but separate them. Current structure:

project/
----apps/
--------appOne/
------------static/
------------templates/
------------__init__.py
------------models.py
------------urls.py
------------views.py
--------__init__.py/
----MEDIA/
----project/
--------__init__.py
--------settings.py
--------urls.py
----manage.py

I would like to save the original uploaded image to MEDIA/ and the resized image to a folder inside the MEDIA folder, like MEDIA/media/. Right now, it's nesting 3 times:

original image goes to ---> MEDIA/media/
resized image goes to ---> MEDIA/media/media

I'm almost positive I have my settings wrong but I've been fiddling with it for too long and nothing is working. It seems every tutorial configures things differently and I'm just not sure what the preferred structure is or why my current config isn't working the way I expect.

Here is my settings.py:

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

models.py:

from django.conf import settings
from smartfields import fields
from smartfields.dependencies import FileDependency
from smartfields.processors import ImageProcessor

class Image(models.Model):
    client = models.ForeignKey(Client, null=True, blank=True)
    model_pic = fields.ImageField(upload_to=settings.MEDIA_URL, dependencies=[
        FileDependency(processor=ImageProcessor(
        format='PNG', scale={'max_width': 500, 'max_height': 500}))
])

views.py:

def upload(request):
    form = ImageUploadForm(request.POST, request.FILES)
    if form.is_valid():
            client = Client.objects.get(id=request.session['id'])
            image = Image.objects.create(client=client, model_pic=form.cleaned_data['image'])
    return redirect(reverse('cphh:gallery'))


def show_images(request):
    context = {
        'images': Image.objects.all().order_by('-created_at'),
        'media_url': settings.MEDIA_URL,
    }
    return render(request,'cphh/gallery.html', context)

The triple-nested uploaded images do render properly on my template:

{% for image in images %}
    <img class="gallery-image" src="{{media_url}}{{ image.model_pic }}"
{% endfor %}

srj srj · Accepted Answer · 2017-04-13T07:03:36

As per the documentation

MEDIA_ROOT is the Absolute filesystem path to the directory that will hold user-uploaded files.

Your code that pushes the uploaded Images to the root should have settings.MEDIA_ROOT/<sub-folder> instead of settings.MEDIA_URL

MEDIA_URL on the other hand is a placeholder for the url a client should hit to access your media. This is useful when you don't want to keep your media on your local filesystem, but to an external storage like amazon s3.

Using {{MEDIA_URL}} in your templates gives you a good way of not hard-coding the eventual media location.

Django MEDIA_ROOT, MEDIA_URL etc

2 Answers