Django - bootstrap -modal-form не возвращает данные, если не использует представление на основе классов

Question

Я пытаюсь использовать модальные формы для фотогалереи на моем django сайте. На сайте используются django -bootstrap4 и django - bootstrap -modal-формы. Модальные формы отлично работают для изменения комментариев к фотографии или для удаления фотографии из галереи. Но если я хочу добавить фотографии в галерею, используя форму без связанной модели, модальная форма не возвращает данных при отправке после выбора одного или нескольких файлов, и модальная форма отображает сообщение об ошибке: Это поле обязательно для заполнения.

Если я использую обычную форму для добавления фотографии (не модальную), она работает нормально.

Я думаю, что чего-то не хватает, но не могу найти что.

models.py:

class Gallery(models.Model):
    title = models.CharField(max_length=256, verbose_name='Title')
    description = models.TextField(blank=True, default='', verbose_name='Gallery description')

class Photo(models.Model):
    gallery = models.ForeignKey(Gallery, on_delete=models.CASCADE, verbose_name='Gallery')
    photo = models.ImageField(verbose_name='Photo')
    comment = models.TextField(max_length=256, verbose_name='Photo comment', blank=True, default='')

    def get_absolute_url(self):
        return reverse('manage', kwargs={'pk': self.gallery.pk})

@receiver(post_delete, sender=Photo)
def submission_delete(sender, instance, **kwargs):
    instance.photo.delete(False)

forms.py:

class GetPhotosForm(forms.Form):
    file_field = forms.FileField(widget=forms.ClearableFileInput(attrs={'multiple': True}), label='Add photos')

class PhotoForm(BSModalForm):
    class Meta:
        model = Photo
        fields = ['comment']

views.py

# Manage gallery (add photos)
def manage_gallery(request, pk):
    gallery = get_object_or_404(Gallery, pk=pk)
    photos = Photo.objects.filter(gallery=gallery)
    return render(request, 'gallery/manage.html', {"gallery":gallery, "photos": photos})

# Add photos to gallery
def add_photos(request, pk):
    if request.method == 'POST':
        form = GetPhotosForm(request.POST, request.FILES)
        files = request.FILES.getlist('file_field')
        gallery = Gallery.objects.get(pk=pk)

        if form.is_valid():
            # Create directory to save photos if needed
            ...
             for f in files:
                # Resize and rotate photo if needed and save it
                ...
                photo = path_to_photo_file_on_disk
                Photo.objects.create(gallery = gallery, photo = photo)

            return HttpResponseRedirect(reverse('manage', kwargs={"pk": pk}))
    else:
        form = GetPhotosForm()

    context = {
        'form': form,
    }
    return render(request, 'gallery/get_photo.html', context)

# Modify photo comment
class modif_photo(BSModalUpdateView):
    model = Photo
    form_class = PhotoForm
    success_message = 'Modification completed'

# remove photo
class delete_photo(BSModalDeleteView):
    model = Photo
    form_class = PhotoForm
    success_message = 'Delete completed'

    def get_success_url(self):
        return reverse_lazy('manage', kwargs={'pk': self.object.gallery.pk})

urls.py:

urlpatterns = [
    ...
    path('manage/<int:pk>', views.manage_gallery, name='manage'),
    path('add/<int:pk>', views.add_photos, name='add'),
    path('modifphoto/<int:pk>', views.modif_photo.as_view(), name='modifphoto'),
    path('deletephoto/<int:pk>', views.delete_photo.as_view(), name='deletephoto'),
    ...
]

управление. html:

<p><button class="add-photo btn btn-outline-secondary" type="button" name="button">Add photos</button></p>

{% for photo in photos %}
  <p>
    <img src="{{ photo.photo.url }}" /><br />
    {{ photo.comment }}<br />
    <button type="button" class="mr-1 modif_photo btn btn-outline-secondary"  data-id="{% url 'modifphoto' pk=photo.pk %}">
      <span class="fa fa-pencil"></span>
    </button>
    <button type="button" class="delete_photo btn btn-outline-secondary"  data-id="{% url 'deletephoto' pk=photo.pk %}">
      <span class="fa fa-trash"></span>
    </button>
  </p>
{% endfor %}

<script type="text/javascript">
$(function () {
    // Add photo button
    $(".add-photo").modalForm({formURL: "{% url 'add' pk=gallery.pk %}"});

    // Update photo
    $(".modif_photo").each(function () {
      $(this).modalForm({formURL: $(this).data('id')});
    });

    // Delete photo
    $(".delete_photo").each(function () {
      $(this).modalForm({formURL: $(this).data('id')});
    });

  });
</script>

photo_form. html:

<form method="post" action="">
  {% csrf_token %}

 <div class="modal-header">
    <h5 class="modal-title">Modify photo comment</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <p class="text-center m-4">
    <img height="160" src="{{ object.photo.url }}" />
  </p>

  <div class="modal-body">
    {% for field in form %}
      <div class="form-group {% if field.errors %} invalid {% endif %}">
        {% bootstrap_field field %}
      </div>
    {% endfor %}
  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    <button type="button" class="submit-btn btn btn-primary">Modify</button>
  </div>

</form>

get_photo. html:

<form method="post" action="">
{% csrf_token %}

  <div class="modal-header">
    <h5 class="modal-title">Modify photo comment</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="modal-body">
    {% for field in form %}
      <div class="form-group {% if field.errors %} invalid {% endif %}">
        {% bootstrap_field field %}
      </div>
    {% endfor %}
   </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Delete</button>
    <button type="button" class="submit-btn btn btn-primary">Download</button>
  </div>

</form>