OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How do I create an 'Update Profile Picture' function in django

  • Thread starter Thread starter Shadhul Haneef
  • Start date Start date
S

Shadhul Haneef

Guest
Okay, so basically I created a function in django where you can change the profile picture but the issue is that It's doing something else instead. Have a look below to understand what's happening

I have added these codes into my settings.py file

settings.py

Code:
STATIC_URL = 'static/'

MEDIA_URL = '/media/'

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

and also added these to the urls.py

urls.py

Code:
from django.contrib import admin
from django.urls import path , include 
from django.conf.urls.static import static
from django.conf import settings 

urlpatterns = [
    path('admin/', admin.site.urls),
    path('user/',include('members.urls')),
    path('',include('blogposts.urls')), # MAIN URL 
    
]

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

This is the model that I created for the User

models.py

Code:
class Profile(models.Model):
    user = models.OneToOneField(User,on_delete = models.CASCADE, null = True , blank = True )
    bio = models.TextField()
    profile_pic = models.ImageField(upload_to = 'images',default= '/../media/images/image.png')

    def __str__(self):
        return str(self.user)

This is the form that I created to change the Profile Pic

forms.py

Code:
class ProfileForm(forms.ModelForm):
    class Meta:
        model = Profile 
        fields = ['profile_pic']

This is the urls.py inside the app

urls.py (app)

Code:
from django.urls import path , include 
from . import views 


urlpatterns = [
    path('',views.homepage,name = 'home-page'),
    path('view_post/<int:pk>',views.view_post,name='view-post'),
    path('blogcreation',views.create_blog,name='blog-form'),

    path('aboutme',views.about_user,name = 'show-user'), # this is the one that takes to the page where you can change your profile picture and displays your bio

    path('delete/<int:pk>',views.delete_post,name = 'delete-post'),
    path('edit_blog/<int:pk>',views.edit_blog,name = 'edit-post'),
]

These are the codes in views.py

views.py

Code:
def about_user(request):

    profile = Profile.objects.all()

    if request.method == "POST":
        form = ProfileForm(request.POST,request.FILES)
        if form.is_valid():
            form.save()
            return render(request, 'show_user.html',{'form':form,'profile':profile})

    else:
        form = ProfileForm()
    return render(request, 'show_user.html',{'form':form,'profile':profile})

and finally. This is show_user.html my html page.

show_user.html

Code:
{{user.profile.bio}}
<img src = "{{user.profile.profile_pic}}" height = "500">



<form method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Upload</button>
</form>

and these are my directories.

My Directory incase if you find something wrong

Now the issue is that my user profile bio is working fine and my default user profile is showing.

show_user.html

But when I want to change the pic and click on 'choose file' and choose a random pic which is located in my media folder

choosing download.png located at the same directory as the default profile picture

after selecting 'download.jpg' and uploading it. It doesn't change the picture and this is what happens.

The main issue

any solutions ?

I cannot wrap my head around this and I can't find any solutions.
<p>Okay, so basically I created a function in django where you can change the profile picture but the issue is that It's doing something else instead. Have a look below to understand what's happening</p>
<p>I have added these codes into my settings.py file</p>
<p><em>settings.py</em></p>
<pre><code>STATIC_URL = 'static/'

MEDIA_URL = '/media/'

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

</code></pre>
<p>and also added these to the urls.py</p>
<p><em>urls.py</em></p>
<pre><code>from django.contrib import admin
from django.urls import path , include
from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [
path('admin/', admin.site.urls),
path('user/',include('members.urls')),
path('',include('blogposts.urls')), # MAIN URL

]

if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL,document_root = settings.MEDIA_ROOT)
</code></pre>
<p>This is the model that I created for the User</p>
<p><em>models.py</em></p>
<pre><code>class Profile(models.Model):
user = models.OneToOneField(User,on_delete = models.CASCADE, null = True , blank = True )
bio = models.TextField()
profile_pic = models.ImageField(upload_to = 'images',default= '/../media/images/image.png')

def __str__(self):
return str(self.user)
</code></pre>
<p>This is the form that I created to change the Profile Pic</p>
<p><em>forms.py</em></p>
<pre><code>class ProfileForm(forms.ModelForm):
class Meta:
model = Profile
fields = ['profile_pic']
</code></pre>
<p>This is the urls.py inside the app</p>
<p><em>urls.py (app)</em></p>
<pre><code>from django.urls import path , include
from . import views


urlpatterns = [
path('',views.homepage,name = 'home-page'),
path('view_post/<int:pk>',views.view_post,name='view-post'),
path('blogcreation',views.create_blog,name='blog-form'),

path('aboutme',views.about_user,name = 'show-user'), # this is the one that takes to the page where you can change your profile picture and displays your bio

path('delete/<int:pk>',views.delete_post,name = 'delete-post'),
path('edit_blog/<int:pk>',views.edit_blog,name = 'edit-post'),
]

</code></pre>
<p>These are the codes in views.py</p>
<p><em>views.py</em></p>
<pre><code>def about_user(request):

profile = Profile.objects.all()

if request.method == "POST":
form = ProfileForm(request.POST,request.FILES)
if form.is_valid():
form.save()
return render(request, 'show_user.html',{'form':form,'profile':profile})

else:
form = ProfileForm()
return render(request, 'show_user.html',{'form':form,'profile':profile})

</code></pre>
<p>and finally. This is show_user.html my html page.</p>
<p><em>show_user.html</em></p>
<pre><code>{{user.profile.bio}}
<img src = "{{user.profile.profile_pic}}" height = "500">



<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Upload</button>
</form>



</code></pre>
<p>and these are my directories.</p>
<p><a href="https://i.sstatic.net/yrIaPse0.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/yrIaPse0.png" alt="My Directory incase if you find something wrong " /></a></p>
<p>Now the issue is that my user profile bio is working fine and my default user profile is showing.</p>
<p><a href="https://i.sstatic.net/51Zk5xbH.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/51Zk5xbH.png" alt="show_user.html " /></a></p>
<p>But when I want to change the pic and click on 'choose file' and choose a random pic which is located in my media folder</p>
<p><a href="https://i.sstatic.net/cWhrDOMg.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/cWhrDOMg.png" alt="choosing download.png located at the same directory as the default profile picture " /></a></p>
<p>after selecting 'download.jpg' and uploading it. It doesn't change the picture and this is what happens.</p>
<p><a href="https://i.sstatic.net/pBhhT93f.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/pBhhT93f.png" alt="The main issue" /></a></p>
<p>any solutions ?</p>
<p>I cannot wrap my head around this and I can't find any solutions.</p>
 

Latest posts

Top