How to Store Image File in Django from html form using Post request?

Question

I am working on a project that require an profile pic. I created a Model in Django UserProfile

class UserProfile(models.Model):
user = models.OneToOneField(
    User, on_delete=models.CASCADE, primary_key=True)
image = models.ImageField()
adress = models.CharField(default='', max_length=150, blank=True)
cnic = models.IntegerField(null=True)
contact = models.IntegerField(null=True)
city = models.CharField(max_length=50, null=True)
about = models.CharField(max_length=50, null=True)
location = models.CharField(max_length=150, null=True)
subscriptions = models.IntegerField(null=True)
rating = models.IntegerField(null=True)

I am currently fetching data from HTML

<form action="/users/profile/" method="POST" style="display: contents;">
            {% csrf_token %}

            <div class="col-md-3 border-right">
                <div class="d-flex flex-column align-items-center text-center p-3 py-5">
                    {% if profile.image %}
                    <img class="rounded-circle mt-5" src="/media/{{profile.image}}"
                        style="width: 200px;max-height: 300px;" id='image'>
                    {% else %}
                    <img class="rounded-circle mt-5"
                        src="https://image.shutterstock.com/image-vector/house-not-available-icon-flat-260nw-1030785001.jpg"
                        style="width: 200px;max-height: 300px;" id='image'>
                    {% endif %}
                    <label for="upload-photo" class="uploadImgLabel btn btn-outline-danger w-75">Browse</label>
                    <input type="file" name="photo" id="upload-photo" required />

                    <span class="font-weight-bold">{{user}}</span><span
                        class="text-black-50">{{user.email}}</span><span>
                    </span>
                </div>

All the other field is working correctly and I can visualize data by printing in views.py

if request.method == 'POST':
    photo = request.POST.get('photo')
    fname = request.POST.get('firstname')
    lastname = request.POST.get('lastname')
    contact = request.POST.get('contact')
    address = request.POST.get('address')
    email = request.POST.get('email')
    country = request.POST.get('country')
    cnic = request.POST.get('cnic')
    city = request.POST.get('city')

    user = User.objects.get(username=request.user)
    user.first_name = fname
    user.last_name = lastname
    user.email = email
    user.save()

    obj = models.UserProfile.objects.get(user=request.user)
    obj.adress = address
    # obj.image = photo, <---- Here is the problem
    obj.contact = contact
    obj.city = city
    obj.cnic = cnic
    obj.subscriptions = 100
    obj.rating = 4
    obj.save()

I am unable to save data in obj.save() its shows an error when I try to put an image like obj.image=photo

Error AttributeError at /users/profile/ 'tuple' object has no attribute '_committed

I am swore it is because of the image if i visualize image (print(photo)) its shows file name 'Image.jpg' '

score 0 · Answer 1 · answered May 01 '21 at 19:43

0

I believe you need to use request.FILES['photo'] to access the uploaded file from the form. the file is not saved in the database only the path and will be uploaded to your MEDIA_ROOT directory

answered May 01 '21 at 19:43

Codebug

69
1
9

score 0 · Accepted Answer · answered May 01 '21 at 23:09

There are two parts to an image upload. Firstly, the encoding of the form has to be set to "multipart/form-data" You can do this easily with

enctype="multipart/form-data"

Why do we have to do this? Here is a good place to read more about it.

Now because your data is not being sent just like a text or JSON, you cannot access it using your normal request.POST.get('photo')

You've to receive it using request.FILES.get('photo') You can read more about it in the Django docs

A bonus -

Defining your image column in the model would work a lot better if you would specify a directory, something like this.

image = models.ImageField(upload_to="%Y/%m/%d")

How to Store Image File in Django from html form using Post request?

2 Answers2