Why form with the ImageField is not valid in DJango?

Question

I have model in Django which name is "User":

class User(models.Model):
    user_id = models.AutoField(auto_created = True, primary_key = True, serialize = False, verbose_name ='ID')
    surname = models.CharField(max_length=100)
    name = models.CharField(max_length=100)
    patronymic = models.CharField(max_length=100)
    email = models.CharField(max_length=100)
    avatar = models.ImageField(upload_to='store/static/store/user_avatars/')

Also I include columns of this model into my form:

class UserForm(forms.Form):
    surname = forms.CharField(max_length=100)
    name = forms.CharField(max_length=100)
    patronymic = forms.CharField(max_length=100)
    email = forms.CharField(max_length=100)
    password = forms.CharField(max_length=100)
    avatar = forms.ImageField()

View which gets that data:

def sign_up(request):
    if request.method == 'GET':
        return render(request, 'store/sign_up.html')
    elif request.method == 'POST':
        form = UserForm(request.POST, request.FILES)

        if form.is_valid():
            user = User(surname=form.cleaned_data['surname'],
                    name=form.cleaned_data['name'],
                    patronymic=form.cleaned_data['patronymic'],
                    email=form.cleaned_data['email'],
                    avatar=form.cleaned_data['avatar'])
            user.save()

            return HttpResponse("Alright, you signed up! " + form.cleaned_data['email'])
        else:
            print(form.as_table())
            return HttpResponse("Data is error!")

And, finally, front of this view:

        <form method="post">
            {% csrf_token %}
            <div class="user_data">
                <div class="user_data_grid">
                    <input type="text" name="surname" placeholder="Surname" id="surname" style="grid-row: 2 / span 1">
                    <input type="text" name="name" placeholder="Name" id="name" style="grid-row: 3 / span 1">
                    <input type="text" name="patronymic" placeholder="Patronymic" id="patronymic" style="grid-row: 4 / span 1">
                    <input type="email" name="email" placeholder="Enter your mail" id="email" style="grid-row: 5 / span 1">
                    <input type="password" name="password" id="password" placeholder="Enter password" style="grid-row: 6 / span 1">
                    <input type="checkbox" id="checkbox" onclick="seePassword()" style="grid-row: 6 / span 1">
                    <label for="checkbox" style="grid-row: 6 / span 1"></label>
                    <p id="password_prompt" style="grid-row: 7 / span 1">
                        Password must be at least 8 symbols length!
                    </p>
                    <input type="submit" id="submit_personal_data" value="Sign up" style="grid-row: 8 / span 1" disabled>
                </div>
            </div>
            <div class="user_photo">
                <div class="user_photo_grid">
                    <img src="{% static 'store/sign_up/default_avatar.png' %}" style="grid-row: 2 / span 5" id="avatar_image">
                    <input name="avatar" type="file" accept=".jpg, .jpeg, .png" id="submit_photo" onchange="displayIMG(this)">
                    <label for="submit_photo" style="grid-row: 8">Profile photo load</label>
                </div>
            </div>
        </form>

So, what I want to ask about. When I don't include ImageField into my form and model - there is not any of errors, data adds into table correctly. But, when I include ImageField into my form and model like in example above - there is error - my form becomes invalid. I get information about my form in table, and this information is like this:

<tr><th><label for="id_surname">Surname:</label></th><td><input type="text" name="surname" value="Surname" maxlength="100" required id="id_surname"></td></tr>
<tr><th><label for="id_name">Name:</label></th><td><input type="text" name="name" value="Name" maxlength="100" required id="id_name"></td></tr>
<tr><th><label for="id_patronymic">Patronymic:</label></th><td><input type="text" name="patronymic" value="Patronymic" maxlength="100" required id="id_patronymic"></td></tr>
<tr><th><label for="id_email">Email:</label></th><td><input type="text" name="email" value="email@email.com" maxlength="100" required id="id_email"></td></tr>
<tr><th><label for="id_password">Password:</label></th><td><input type="text" name="password" value="password" maxlength="100" required id="id_password"></td></tr>
<tr><th><label for="id_avatar">Avatar:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input type="file" name="avatar" accept="image/*" required id="id_avatar"

Last string says, that the problem is there, in ImageField. I think that the problem may be in front, because when I add information about user (ImageFielf data also) in Django admin panel - operation is successfull. So, why my form here is invalid?

Answer 1

You are forgetting enc-type.

your form should be like:

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

Answer 2

try it like this:

    <form method="post">
        {% csrf_token %}
        <div class="user_data">
            <div class="user_data_grid">
                <input type="text" name="surname" placeholder="Surname" id="surname" style="grid-row: 2 / span 1">
                <input type="text" name="name" placeholder="Name" id="name" style="grid-row: 3 / span 1">
                <input type="text" name="patronymic" placeholder="Patronymic" id="patronymic" style="grid-row: 4 / span 1">
                <input type="email" name="email" placeholder="Enter your mail" id="email" style="grid-row: 5 / span 1">
                <input type="password" name="password" id="password" placeholder="Enter password" style="grid-row: 6 / span 1">
                <input type="checkbox" id="checkbox" onclick="seePassword()" style="grid-row: 6 / span 1">
                <label for="checkbox" style="grid-row: 6 / span 1"></label>
                <p id="password_prompt" style="grid-row: 7 / span 1">
                    Password must be at least 8 symbols length!
                </p>
        <div class="user_photo">
            <div class="user_photo_grid">
                <img src="{% static 'store/sign_up/default_avatar.png' %}" style="grid-row: 2 / span 5" id="avatar_image">
                <input name="avatar" type="file" accept=".jpg, .jpeg, .png" id="submit_photo" onchange="displayIMG(this)">
                <label for="submit_photo" style="grid-row: 8">Profile photo load</label>
            </div>
        </div>
         <input type="submit" id="submit_personal_data" value="Sign up" style="grid-row: 8 / span 1" disabled>
            </div>
        </div>
   </form>

Answer 3

On your model form avatar field you should type:

avatar = forms.ImageField(blank=True)

If that doesn't work, try this:

avatar = forms.ImageField(required=False)