The look of the File Upload for the picture in the Form is not OK as the button is inside the field. While it shows in the form as uploaded, it won't post. When I look in the firebug, I can see that the field for the File image is not being sent through with the other name fields, so the form never validates.

Here is how it looks

[enter image description here](https://i.stack.imgur.com/3O3lr.png)

Here is the definition in the Model.

```
picture = models.ImageField(upload_to=user_directory_path)

```

So when Django creates the Form it does it in that weird way for the File filed

How should I then define the Field for File in the Model? Or where is the error lying?

The Form had this instruction>

```
{% load widget_tweaks %}
<form method="post" action="{% url 'book_create' %}" class="js-book-create-form" enctype="multipart/form-data">

  {% csrf_token %}

  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Create a new book</h4>
  </div>
  <div class="modal-body">
    {% for field in form %}
      <div class="form-group{% if field.errors %} has-error{% endif %}">
        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
        {% render_field field class="form-control" %}
        {% for error in field.errors %}
          <p class="help-block">{{ error }}</p>
        {% endfor %}
      </div>
    {% endfor %}
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-primary">Create book</button>
  </div>
</form>

```

The handling of the form was like this:

```
data = dict()

    if request.method == 'POST':
        form = NewStockOfBookssForm(request.POST, request.FILES)
        if form.is_valid():

            form.save()
            data['form_is_valid'] = True
        else:
            data['form_is_valid'] = False

```