CODEWITHSUNDEEP
pythondjangoimage
Yusof Antar
Yusof Antar

Reputation: 309

I want to Display the image on my template

I created a ImageFields in my Form.py

class ProPic(forms.Form):
     image = forms.ImageField(help_text="Upload Profile Picture: ", required=False)

and my views.py is

def Profile(request): 
    context = {} 
    context['image'] = ProPic() 
    return render( request, "profile.html", context)

my template profile.html

{% extends 'base.html' %}
{% block content %}
<!DOCTYPE html>
<html lang="en">
<head>
    {% load crispy_forms_tags %}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile</title>
</head>
<style>
    .align-middle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .card {
        width: auto;
    }
</style>
<body>
    <div class="card align-middle">
         <!-- I want to Display the picture here  -->
        <div class="card-body">
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Username: {{ user.username|title }}</li>
          <li class="list-group-item">Emai: {{ user.email }}</li>
          <li class="list-group-item">Vestibulum at eros</li>
        </ul>
        <div class="card-body">
          <a href="{% url 'logout' %}" class="card-link">Logout</a><br>
          {{ image }}
        </div>
      </div>
</body>
</html>
{% endblock content %}

I just can't see my image when i upload it and i dont want to use models if it is possible and i want my image to appear where i put my comment in the code below

Upvotes: 0

Views: 83

Answers (1)

SLDem
SLDem

Reputation: 2182

models.py

class ProfilePicture(models.Model):  # your model
    image = models.ImageField(upload_to='images')
    
    profile = models.ForeignKey(User, on_delete=models.CASCADE) # here user is your default auth user model

forms.py

class ProfilePictureForm(forms.ModelForm):
    
    class Meta:
        model = ProfilePicture
        fields = ('image', ) # here is important to place a comma after image since fields argument expects an iterable

urls.py

urlpatterns = [
    path('profile/<int:pk>', views.profile, name='profile'), # pass pk as argument to your url in here **<int:pk>**
    path('all-users', views.all_users, name='all_users'),
    path('upload-avatar', views.upload_avatar, name='upload_avatar'),
]

views.py

def all_users(request): 
    users = User.objects.all()
    return render(request, 'all_users.html', {'users': users})


def upload_avatar(request):
    if request.method == 'POST':
        form = ProfilePictureForm(request.POST, request.FILES)
        if form.is_valid():
            new_profile_picture = form.save(commit=False) # commit=False because we need to assign the user to the picture before saving
            new_profile_picture.user = request.user
            new_profile_picutre.save()
            return redirect('profile', pk=request.user.pk)
        else:
            return HttpResponse('Form invalid, please select a valid picture')
    else:
        form = ProfilePictureForm()
    return render(request, 'upload_profile_picture.html', {'form': form})


def profile(request, pk): # accept **pk** of a user you want to get profile data for 
    user = User.objects.get(pk=pk) # get the user with the passed **pk**
    profile_picture = ProfilePicture.objects.get(user=user) # get the user profile picture
    context = {}
    context['profile_picture'] = profile_picture
    context['user'] = user
    return render(request, 'pprofile.html', context)

all_users.html

"""
List all usernames as the links to their profiles.
"""


{% for user in users %}
    <a href="{% url 'profile' user.pk %}">{{ user.username }}</a> # here is where you pass a parameter to the url
{% endfor %}

profile.html

<h1>This is the profile of {{ user.username }} </h1> # user from context
{% if profile_picture %}
    <img src="{{ profile_picture.image.url }}" alt='/'> # image from context (here you get the image field url attribute and pass it to img tag for display)
{% else %}
    <p> This user doesn't have a picture yet </p>
{% endif %}

upload_profile_picture.html

<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Add Profile Picture</button>
</form>

P.S. Use snake_case for regular views and PascalCase for Class-Based-Views

Upvotes: 1

Related Questions