Интеграция dropzone.js с наборами форм django - PullRequest
Новая
       72

Интеграция dropzone.js с наборами форм django

0 голосов
/ 09 ноября 2019

У меня есть страница, которая позволяет пользователям создавать сообщения в блоге. Я использую представление на основе класса (CreateView) в представлениях. У меня есть пост моделей, в котором есть все поля, которые пользователь заполнит. Я также хочу, чтобы пользователь добавил несколько сообщений в пост. Поэтому я создал отдельную модель Image с полем ForeignKey для пост-модели. Затем я использовал наборы форм django, чтобы позволить пользователю отправлять максимум 10 изображений с постом. Пока это работает именно так, как хотелось бы. Тем не менее, я бы хотел, чтобы пользователю было проще загружать изображения на внешний интерфейс. В настоящее время есть 10 полей ввода изображения, и пользователь должен добавить каждое изображение одно за другим. Я думал об использовании dropzonejs, так как это очень удобно для пользователя. Проблема в том, что я изо всех сил стараюсь понять, как это настроить. В документации dropzone.js говорится, что форма должна получить класс dropzone. Дело в том, что я не хочу, чтобы вся форма была дропзоной, поскольку пользователь также будет вводить другие поля формы сообщения вместе с изображениями на той же странице. Можно ли создать зону перетаскивания на странице, в то время как они все еще являются полями ввода других форм?

Я думал, что мог бы использовать два тега формы на html-странице, но тогда мне, возможно, потребуется включить некоторый JavaScript, чтобычто я могу отправить два тега формы с помощью одной кнопки?

моделей 

class Post(models.Model):
    title = models.CharField(max_length=100, blank=True)
    date_posted = models.DateTimeField(default=timezone.now)
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    overview = models.TextField(blank=True, null=True)

class Image(models.Model):
    post = models.ForeignKey(Post, default=None, on_delete=models.CASCADE)
    image = models.ImageField(upload_to=post_directory_path,
                              verbose_name='Image')

форм 

class PostCreationForm(forms.ModelForm):

    class Meta:
        model = Post
        fields = [
                'title',
                'overview',
                ]

class PostImagesForm(forms.ModelForm):
    image = forms.ImageField(widget=forms.FileInput(attrs={'multiple': True}))

    class Meta:
        model = Image
        fields = ['image']

ImageFormSet = inlineformset_factory(Post, 
                                    Image, 
                                    form = PostImagesForm, 
                                    extra=10, 
                                    max_num=10, 
                                    can_delete=False)

Просмотр 

class PostCreateView(LoginRequiredMixin, CreateView):
    model = Post
    form_class = PostCreationForm

    def get_context_data(self, **kwargs):
        context = super(PostCreateView, self).get_context_data(**kwargs)
        if self.request.POST:
            context['images'] = ImageFormSet(self.request.POST, self.request.FILES)
        else:
            context['images'] = ImageFormSet()
        return context

    def form_valid(self, form):
        data = self.get_context_data()
        formset = data['images']

        if formset.is_valid():
            form.instance.author = self.request.user
            self.object = form.save()
            formset.instance = self.object
            formset.save()
            return redirect(self.object.get_absolute_url())
        return super(ProfileCreateView, self).form_valid(form)

Шаблон 

{% extends "blog/base.html"%}
{% load crispy_forms_tags %}
{% load static %}
{% block content %}
<div class="content-section">
  <form method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <fieldset class="form-group">
      <legend class="border-bottom mb-4">Post</legend>
      {{ form|crispy }}
      {{ form.errors }}
      {{ form.media }}

      <div class="container">
      {{ images.management_form }}
      {% for form in images %}
        <div class="link-formset mb-4">
          {% if form.instance.pk %}{{ form.DELETE }}{% endif %}
          {{ form.image }}
        </div>
      {% endfor %}
      </div>

    </fieldset>
    <div class="form-group">
      <button class="btn btn-outline-info" type="submit">Post</button>
    </div>
  </form>
</div>
{% endblock content %}

Итак, в настоящее время я получаю 10 полей для ввода изображений, в которые мне нужно добавлять изображения по отдельности. Это работает, и изображения сохраняются с формой, как и ожидалось, но это, очевидно, не самая желательная форма. Я хотел бы реализовать dropzone для изображений в форме. Пока мне только удалось превратить всю форму в дропзону. Спасибо

...