dropzone.js

http://www.dropzonejs.com/

dropzone.js + Django: How to build a file upload form: http://amatellanes.wordpress.com/2013/11/05/dropzonejs-django-how-to-build-a-file-upload-form/

WIP

30/01/2014

Lovely looking library, but I couldn’t get it integrated with Django (not yet anyways). Here are my notes, in case I want to try again in future…

In the following code:

The form ID is my_form (see below), this matches with the myForm in the options section
The name of the file upload field is picture.
The submit button has an ID of my_submit.

{% block stylesheets %}
  {{ block.super }}
  <link rel="stylesheet" href="{% static 'base/css/dropzone/dropzone.css' %}">
{% endblock stylesheets %}

{% block script %}
  {{ block.super }}
  <script src="{% static 'base/js/dropzone/dropzone.js' %}" type="text/javascript"></script>
  <script type="text/javascript">
    Dropzone.options.myForm = {
      // Prevents Dropzone from uploading dropped files immediately
      autoProcessQueue : false,
      maxFiles: 1,
      paramName: "picture",
      init : function() {
        var submitButton = document.querySelector("#my_submit")
        myForm = this;
        submitButton.addEventListener("click", function() {
          myForm.processQueue();
          // Tell Dropzone to process all queued files.
        });
        // You might want to show the submit button only when
        // files are dropped here:
        this.on("addedfile", function() {
            // Show submit button here and/or inform user to click it.
        });
      }
    };
  </script>
{% endblock script %}

Add the fallback attribute to the widget:

class StoryForm(RequiredFieldForm):

    class Meta:
        model = Story
        fields = ('area', 'title', 'description', 'picture')
        widgets = {
            'picture': forms.FileInput(attrs=dict(fallback=True)),
        }

For this section, check out dropzone, fallback, my_form and my_submit:

<form action="." id="my_form" method="post" {% if multipart %}enctype="multipart/form-data"{% endif %} class="pure-form pure-form-stacked {% if multipart %}dropzone{% endif %}">
  {% csrf_token %}
  {{ form.non_field_errors }}
  <fieldset>
    <legend>{{ legend }}</legend>
    {% for field in form %}
      <div class="pure-control-group {% if field.field.widget.attrs.fallback %}fallback{% endif %}">
  ...
  <input type="submit" id="my_submit" value="{% if submit %}{{ submit }}{% else %}Submit{% endif %}" class="pure-button pure-button-primary" />