Как прикрутить DropzoneJS к полю в Джанго?

Question

[nurzhannogerbek]

Здравствуйте! Помогите пожалуйста прикрутить Dropzone JS к форме.

Есть модель данных Article(Cтатья) c двумя полями: description и image. На основе этой модели создал форму, где пользователь должен создавать статью, указывая описания и загрузив один или несколько изображений. Не получается прикрутить к полю image dropzonejs.

models.py:

class Article(models.Model):
    description = models.TextField(_('Description'))
    image = models.FileField(upload_to='images//%Y/%m/%d/')

forms.py:

class ArticleForm(forms.ModelForm):
    class Meta:
        model = Article
        fields = ('description', 'image')

views.py:

def article_add(request):
    data = dict()
    if request.method == 'POST':
        article_form = ArticleForm(request.POST, request.FILES)
        if article_form.is_valid():
            article = article_form.save(commit=False)
            ******
            article.save()
            data['form_is_valid'] = True
            articles = Article.objects.all
            context = {'articles': articles}
            context.update(csrf(request))
            data['html_article'] = render_to_string('project/article_list.html', context)
        else:
            data['form_is_valid'] = False
    else:
        article_form = ArticleForm()
    context = {'article_form': article_form}
    data['html_article_form'] = render_to_string('project/article_add.html', context, request=request)
    return JsonResponse(data)

article_add.html:

{% load widget_tweaks %}

<form method="post" action="{% url 'article_add' %}" class="article-add-form dropzone">
    {% csrf_token %}

    {% for field in article_form %}
    <div class="form-group{% if field.errors %} has-danger{% endif %}">
       <label class="form-control-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
       {% render_field field class="form-control" %}
       {% for error in field.errors %}
          <div class="form-control-feedback">{{ error }}</div>
       {% endfor %}
    </div>
    {% endfor %}

    <button type="submit">Submit</button>
</form>

<script type="text/javascript">
    $("#id_image").dropzone({ url: "{% url 'article_add' %}" });
</script>

Answer 1

[Lemat]

Здравствуйте.
Какие нибудь ошибки js в консоли выдаёт?
dropzone.js подключен на странице?

Comments

[nurzhannogerbek]

Я подключил js и сss файлы в шаблоне. В консоли не выдает ошибки. Я пробовал в article_add.html вместо

$("#id_image").dropzone({ url: "{% url 'article_add' %}" });

добавить

$(".dropzone").dropzone({ url: "{% url 'article_add' %}" });

. В конце формы, то есть там где стоит данный кусок кода появляется некое поле куда можно перетаскивать файлы. Мне же нужно к существующему полю (#id_image) прикрепить dropzone. Что вы думаете по этому поводу?