Django, React, Redux: Serving up images

Question

I'm using a React/Redux frontend and a Django backend for a little project. I'm not using anything but the standard Django server for development. I'm trying to add an image field to an already existing UserProfile model. Currently I've got everything working except that Django won't properly serve up my images to either to the main React site or the admin site. When I either attempt to navigate to the url in question or use the Python requests library to directly request the media, the response is of type 'text/html'. Currently my model has the following field:

models.py

class UserProfile(models.Model):
    ...
    ...
    profile_image = models.ImageField(upload_to='path_to_media')

project urls.py

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^api/account/', include('account.urls')),
    url(r'^api/post/', include('post.urls')),
    url(r'.*', views.root, name='root')
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

settings.py

STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static_cdn')
STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'nattr'),
)

account urls.py

urlpatterns = (
    ...,
    url(r'^edit_profile/(?P<user_id>[^/]+)/$',
       views.edit_profile,
      name='edit_profile'),
)

account views.py

def edit_profile(request, user_id):
    try:
        user = User.objects.get(pk=user_id)
         form = UserProfileForm(request.POST, request.FILES, instance=user.profile, user=request.user)
        valid = form.is_valid()
        if valid:
            profile = form.save()
            return JsonResponse(profile.to_user())
        else:
            return JsonResponse({'errors': form.errors}, status=400)
    except User.DoesNotExist:
        return JsonResponse({'errors': 'cannot find user with that id'}, status=400)

What am I doing wrong? I've assigned my media_url & media_root; I've added the media urls to my urlpatterns. My view and form are pretty standard and I can see that the images are being uploaded to the folder structure

Answer 1

Django URL patterns are processed in order. You have .* before settings.MEDIA_URL so every URL, no matter what, will be caught by it. You should move the static URL above .*.

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^api/account/', include('account.urls')),
    url(r'^api/post/', include('post.urls')),
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

# make sure this is always last
urlpatterns += [url(r'.*', views.root, name='root')]

Answer 2

Add the following in your urlpatterns

urlpatterns += static(settings.MEDIA_URL,
                          document_root=settings.MEDIA_ROOT)

And also add this to your settings.py

ENV_PATH = os.path.abspath(os.path.dirname(__file__))
MEDIA_ROOT = os.path.join(ENV_PATH, 'media/')

MEDIA_URL = '/media/'