Can't change images through HTML forms but i can change them from Django admin panel [duplicate-CodePudding

I have a form where users can change their profile picture, but for some reason it just stopped working, but when I try to change their profile picture from the admin panel it works, here is a few of my code.

settings.html

<form method="POST">{% csrf_token %}
    <div class="VpWhO text-center" style="height: 80px">
        <div>
             <h4 style="text-transform: capitalize;">
                 {{request.user.username}}
             </h4>
             {{form.profile_pic}}
        </div>
    </div>

    <button type="submit">Save Changes</button>
</form>

views.py for setting.html


def settings_view(request):
    myinstance = User.objects.filter(username=request.user).first()
    form = SettingsForm(instance=myinstance)

    if request.method == 'POST':
        form = SettingsForm(request.POST, request.FILES, instance=myinstance)
        if form.is_valid():
            obj = form.save(commit=False)
            obj.username = slugify(obj.username)
            obj.save()

            messages.success(request, 'Profile Saved.')
            return redirect('/')
        else:
            messages.error(request, 'Can\' save changes.')
    else:
        myinstance = User.objects.filter(username=request.user).first()
        form = SettingsForm(instance=myinstance)

class User(AbstractBaseUser):

    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
    
    email                   = models.EmailField(verbose_name="email", max_length=60, unique=True)
    username                = models.CharField(max_length=30, unique=True)
    name                    = models.CharField(max_length=30, null=True, blank=True)
    bio                     = models.TextField(null=True, blank=True)
    profile_pic             = models.ImageField(default='default_pfp.jpg', upload_to="user_uploaded")


    date_joined             = models.DateTimeField(verbose_name="date joined", auto_now_add=True)
    last_login              = models.DateTimeField(verbose_name="last login", auto_now_add=True)
    is_admin                = models.BooleanField(default=False)
    is_active               = models.BooleanField(default=True)
    is_staff                = models.BooleanField(default=False)
    is_superuser            = models.BooleanField(default=False)

    USERNAME_FIELD = 'email'
    REQUIRED_FIELDS = ['username', ]

    @property
    def imageURL(self):
        try:
            url = self.profile_pic.url
        except:
            url = 'default_pfp.jpg'
        return url

urls.py

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    MY URLS HERE
]

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

settings.py

STATICFILES_DIRS = [
    BASE_DIR / 'static'
]

STATIC_URL = '/static/'

STATIC_ROOT = BASE_DIR / 'staticfiles'

MEDIA_URL = '/media/'

MEDIA_ROOT = BASE_DIR / 'static/images'

This is how I'm accessing the image in the HTML document.

<div style="width: 50px;">
   <img class="image-big" src="{{user.imageURL}}">
</div>

I don't get any errors, but it just won't show the new image, but the image does go in the folder. Help :(

CodePudding user response：

in you settings.html

<form method="POST"  enctype="multipart/form-data">
{% csrf_token %}
    <div class="VpWhO text-center" style="height: 80px">
        <div>
             <h4 style="text-transform: capitalize;">
                 {{request.user.username}}
             </h4>
             {{form.profile_pic}}
        </div>
    </div>

    <button type="submit">Save Changes</button>
</form>

and to fetch any file you have to pass.url like this

<div style="width: 50px;">
{% if user.profile_pic %}
       <img class="image-big" src="{{user.profile_pic.url}}">
{% else %}
pass whatever you want
{% endif %}
</div>

this has to solve you problem and tell me if you still got any error