Django submit file form won’t save to models through front-end

Solution for Django submit file form won’t save to models through front-end
is Given Below:

So the goal is to get the user to upload images inside the application, and for the images to be displayed on the screen.

The problem is that the forms will not save to the models I made. I am following Django Central https://djangocentral.com/uploading-images-with-django/ for guidance for uploading my images.

What I have at the moment is where the user can type inside the form for their caption and where the user can select a file for their image, but nothing happens when they click the upload button. All that happens, is that it redirects me to the homepage for some reason, but I can fix that later. The only way for the images to be displayed on the website is if I manually go into the admin panel and upload the image there. If anyone could help I would much appreciate it.

view.py

def profile(request):
    if request.method == "POST":
        form = User_Profile_Form(data = request.POST, files = request.FILES)
        if form.is_valid():
            form.save()
            obj = form.instance
            return render(request, "main/profile.html", {"obj":obj})
    else:
        form = User_Profile_Form()
    img = User_Profile.objects.all()
    return render(request,"main/profile.html", {"img":img, "form":form})

models.py

class User_Profile(models.Model):
    caption = models.CharField(max_length = 100)
    image = models.ImageField(upload_to = "img/%y", blank=True)

    def __str__(self):
        return self.caption

forms.py

from django import forms
from .models import User_Profile

class User_Profile_Form(forms.ModelForm):
    class Meta:
        model = User_Profile
        fields = ("caption", "image")

profile.html

                <div class="container">
                    <form action="." method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        {{form.as_p}}
                        <button type="submit" class="btn btn-lg btn-success">Upload</button>
                    </form>

                    {% if obj %}
                    <h3>Succesfully uploaded : {{img_obj.caption}}</h3>
                    <img src="{{ obj.image.url}}" alt="image" class="img-thumbnail" >
                    {% endif %}
                    <hr>


                    {% for x in img %}
                    {% if forloop.first %}<div class="row ">{% endif %}
                        <div class="col-lg-4 col-md-4 col-12" >
                    <div class="text-center mt-2">
                        <img src="{{x.image.url}}" height="70%" width="70%" class="img-thumbnail" alt="...">
                        <h2 class="text-center" >{{x.caption}}</h2></div>
                        </div>
                        {% if forloop.counter|divisibleby:3 %}
                    </div>
                    <div class=row>{% endif %}
                        {% if forloop.last %}</div>{% endif %}

                    {% endfor %}
                </div>

In the template change the action:
from:

<form action="." method="post" enctype="multipart/form-data">

To:

<form action="" method="post" enctype="multipart/form-data">

. redirects you to the home page.

in views.py

def profile(request):
    if request.method == "POST":
        form = User_Profile_Form(data = request.POST, files = request.FILES)
        if form.is_valid():
            form.save()
            obj = form.instance
            return render(request, "main/profile.html", {"obj":obj, "form":form})
    else:
        form = User_Profile_Form()
    img = User_Profile.objects.all()
    return render(request,"main/profile.html", {"img":img, "form":form})

i know what you want to do, i did it on my project, here is my code, edited for your self

views.py

pimageupdate = ProfileImageUpdate(request.POST,request.FILES, instance=request.user.userprofile)
        if pimageupdate.is_valid():
            pimageupdate.save()

should i note that pimageupdate is getting the form from forms.py

and you should add user in your {{}} code like this

{{user.userprofile.default_profile_picture}}

change “post” in your form tag to “POST”

hope this work, let me know if you tried them