Image upload problem with UserProfile and my form

[Pepsodent Cola]

Hi,
I have problems displaying my avatar image which I have uploaded from my forms page.  The browser source code seem to say that it cannot find the correct path to my uploaded image file.  Which file or files do I need to fix?

    <h2>Profile</h2>

    <form action="/accounts/profile/" method="post" enctype="multipart/form-data"><input type='hidden' name='csrfmiddlewaretoken' value='BLJ8GGDTXihEvVCxPxynF1y2hzkjkjSi' />
    <p><label for="id_likes_cheese">Likes cheese:</label> <input id="id_likes_cheese" name="likes_cheese" type="checkbox" /></p>
<p><label for="id_favourite_hamster_name">Favourite hamster name:</label> <input id="id_favourite_hamster_name" maxlength="50" name="favourite_hamster_name" type="text" value="sylt2" /></p>
<p><label for="id_avatar">Avatar:</label> Currently: <a href="1406895413_91_tumblr_m5xo9h5X3E1qgfdhto1_500.gif">1406895413_91_tumblr_m5xo9h5X3E1qgfdhto1_500.gif</a> <input id="avatar-clear_id" name="avatar-clear" type="checkbox" /> <label for="avatar-clear_id">Clear</label><br />Change: <input id="id_avatar" name="avatar" type="file" /></p>
    
<p><img src='/static/userprofile/uploaded_files/Currently: <a href="1406895413_91_tumblr_m5xo9h5X3E1qgfdhto1_500.gif">1406895413_91_tumblr_m5xo9h5X3E1qgfdhto1_500.gif</a> <input id="avatar-clear_id" name="avatar-clear" type="checkbox" /> <label for="avatar-clear_id">Clear</label><br />Change: <input id="id_avatar" name="avatar" type="file" />' width="200" /></p>

    <input type="submit" name="submit" value="Update" />
    </form>

models.py

from django.db import models
from django.contrib.auth.models import User
from time import time
#_______________________________________________________________________________

def get_upload_file_name(instance, filename):
    return "%s_%s" % (str(time()).replace('.','_'), filename)

#_______________________________________________________________________________

class UserProfile(models.Model):
    user = models.OneToOneField(User)
    nickname = models.CharField(max_length=50)
    likes_cheese = models.BooleanField(default=False)
    favourite_hamster_name = models.CharField(max_length=50)
    avatar = models.ImageField(upload_to=get_upload_file_name, blank=True, null=True)

    def __unicode__(self):
        return self.nickname


User.profile = property(lambda u: UserProfile.objects.get_or_create(user=u)[0])
#_______________________________________________________________________________



views.py

from django.shortcuts import render_to_response
from django.http import HttpResponseRedirect
from django.core.context_processors import csrf
from forms import UserProfileForm
from django.contrib.auth.decorators import login_required
#_______________________________________________________________________________

@login_required
def user_profile(request):
    if request.method == 'POST':
        form = UserProfileForm(request.POST, request.FILES, instance=request.user.profile)
        if form.is_valid():
            form.save()
            return HttpResponseRedirect('/accounts/loggedin')
    else:
        user = request.user
        profile = user.profile
        form = UserProfileForm(instance=profile)

    args = {}
    args.update(csrf(request))

    args['form'] = form

    return render_to_response('userprofile/profile.html', args)
#_______________________________________________________________________________



forms.py

from django import forms
from models import UserProfile
#_______________________________________________________________________________

class UserProfileForm(forms.ModelForm):

    class Meta:
        model = UserProfile
        fields = ('likes_cheese', 'favourite_hamster_name', 'avatar')
#_______________________________________________________________________________



profile.html

{% extends "base_main.html" %}

{% block content %}
    <h2>Profile</h2>

    {% for field in form %}
        {{ field.error }}
    {% endfor %}


    <form action="/accounts/profile/" method="post" enctype="multipart/form-data">{% csrf_token %}
    {{ form.as_p }}

    {% if form.avatar %}
    <p><img src='/static/userprofile/uploaded_files/{{form.avatar}}' width="200" /></p>
    {% endif %}

{% comment %}
    <p><img src='{{userprofile.avatar.url}}' width="200" /></p>
{% endcomment %}

    <input type="submit" name="submit" value="Update" />
    </form>
{% endblock %}



settings.py

MEDIA_ROOT = '/Desktop/Django/project1/userprofile/static/userprofile/uploaded_files/'
MEDIA_URL = ''
STATIC_ROOT = ''
STATIC_URL = '/static/'
STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
#    'django.contrib.staticfiles.finders.DefaultStorageFinder',
)



There are 2 static folders in my project1 are there any conflicting issues with my setup?

/Desktop/Django/project1/polls/static/polls/
/Desktop/Django/project1/userprofile/static/userprofile/uploaded_files/

[Collin Anderson]

This looks wrong to me:

 

<p><img src='/static/userprofile/uploaded_files/Currently: <a href="1406895413_91_tumblr_m5xo9h5X3E1qgfdhto1_500.gif">1406895413_91_tumblr_m5xo9h5X3E1qgfdhto1_500.gif</a> <input id="avatar-clear_id" name="avatar-clear" type="checkbox" /> <label for="avatar-clear_id">Clear</label><br />Change: <input id="id_avatar" name="avatar" type="file" />' width="200" /></p>

so maybe, rearranging your code a bit:

    {% if form.avatar %}
    <p><img src="/static/userprofile/uploaded_files/{{ userprofile.avatar }}" width="200"></p>

    {% endif %}

    <p>{{ form.avatar }}</p>

 

[Pepsodent Cola]

Hi,
No luck the image still points to the wrong location.  There was a link however when clicked it says this.

Page not found (404)

Request Method:	GET
Request URL:	http://127.0.0.1:8000/accounts/profile/1406912993_56_tumblr_m5xo9h5X3E1qgfdhto1_500.gif

I'm suspecting it's how my url confs are setup that is causing this problem.  But I can't wrap my brain around this issue and make sense why my uploaded files are being redirected to the wrong link.

<form action="/accounts/profile/" method="post" enctype="multipart/form-data"><input type='hidden' name='csrfmiddlewaretoken' value='0UzHasbpthjW8nmL8viWa0qk4qbnZ4Q1' />

<p><label for="id_likes_cheese">Likes cheese:</label> <input id="id_likes_cheese" name="likes_cheese" type="checkbox" /></p>

<p><label for="id_favourite_hamster_name">Favourite hamster name:</label> <input id="id_favourite_hamster_name" maxlength="50" name="favourite_hamster_name" type="text" value="jam2" /></p>
<p><label for="id_avatar">Avatar:</label> Currently: <a href="1406912993_56_tumblr_m5xo9h5X3E1qgfdhto1_500.gif">1406912993_56_tumblr_m5xo9h5X3E1qgfdhto1_500.gif</a> <input id="avatar-clear_id" name="avatar-clear" type="checkbox" /> <label for="avatar-clear_id">Clear</label><br />Change: <input id="id_avatar" name="avatar" type="file" /></p>
    
<p><img src="/static/userprofile/uploaded_files/" width="200"></p>
<p>Currently: <a href="1406912993_56_tumblr_m5xo9h5X3E1qgfdhto1_500.gif">1406912993_56_tumblr_m5xo9h5X3E1qgfdhto1_500.gif</a> <input id="avatar-clear_id" name="avatar-clear" type="checkbox" /> <label for="avatar-clear_id">Clear</label><br />Change: <input id="id_avatar" name="avatar" type="file" /></p>

<input type="submit" name="submit" value="Update" />
</form>

/Django/navi/userprofile/templates/userprofile/profile.html

    <h2>Profile</h2>

    {% for field in form %}
        {{ field.error }}
    {% endfor %}

    <form action="/accounts/profile/" method="post" enctype="multipart/form-data">{% csrf_token %}
    {{ form.as_p }}

    {% if form.avatar %}
    <p><img src="/static/userprofile/uploaded_files/{{ userprofile.avatar }}" width="200"></p>
    {% endif %}

    <p>{{ form.avatar }}</p>

/Django/navi/navi/urls.py

urlpatterns = patterns('',
    url(r'^navi_polls/', include('navi_polls.urls', namespace="navi_polls")),
    url(r'^accounts/', include('userprofile.urls', namespace="userprofile")),

    # User auth urls
    url(r'^accounts/login/$', 'navi.views.login'),
    url(r'^accounts/auth/$', 'navi.views.auth_view'),
    url(r'^accounts/logout/$', 'navi.views.logout'),
    url(r'^accounts/loggedin/$', 'navi.views.loggedin'),
    url(r'^accounts/invalid/$', 'navi.views.invalid_login'),


/Django/navi/userprofile/urls.py

from django.conf.urls import patterns, include, url
from userprofile import views
#_______________________________________________________________________________

urlpatterns = patterns('',
    #url(r'^profile/$', 'userprofile.views.user_profile'),
    url(r'^profile/$', views.user_profile, name='user_profile'),
)



/Django/navi/userprofile/views.py

from django.shortcuts import render_to_response
from django.http import HttpResponseRedirect
from django.core.context_processors import csrf
from forms import UserProfileForm
from django.contrib.auth.decorators import login_required
#_______________________________________________________________________________

@login_required
def user_profile(request):
    if request.method == 'POST':
        form = UserProfileForm(request.POST, request.FILES, instance=request.user.profile)
        if form.is_valid():
            form.save()
            return HttpResponseRedirect('/accounts/loggedin')
    else:
        user = request.user
        profile = user.profile
        form = UserProfileForm(instance=profile)

    args = {}
    args.update(csrf(request))

    args['form'] = form

    return render_to_response('userprofile/profile.html', args)
#_______________________________________________________________________________

Can anybody see why I'm getting this link
http://127.0.0.1:8000/accounts/profile/1406912993_56_tumblr_m5xo9h5X3E1qgfdhto1_500.gif

instead of this link where my uploaded image is located?

http://127.0.0.1:8000/static/userprofile/uploaded_files/1406912993_56_tumblr_m5xo9h5X3E1qgfdhto1_500.gif

[Collin Anderson]

Set MEDIA_URL to '/media/' or something.

Then add static() to your urls.py if you haven't.

https://docs.djangoproject.com/en/dev/howto/static-files/#serving-files-uploaded-by-a-user-during-development