ListWidget: Provide file upload widget using Dropzone

Originally reported by: Florian Pilz (Bitbucket: florianpilz, GitHub: florianpilz)

In one project we have used Dropzone to upload files. Each file generates a list entry in ListWidget, thus additional information can be displayed / edited. This seems to be so useful, we should consider integrating it into gocept.jsform.

Our template inside the project:

#!HTML

<div class="field form-group">
  <label class="col-sm-3 control-label">Dokumente</label>
  <div class="col-sm-9">
    <div id="documents-list"
         data-collection-url="${documents_collection_url}"
         data-template="document-item"
         data-form-template="document-edit"
         data-form-options='{
           "title": {"label": "Titel"},
           "category_id": {
             "label": "Kategorie",
             "source": ${category_source}}
         }'
         data-modal-title="Dokument bearbeiten">
    </div>
    <div id="upload" class="dropzone" tal:condition="not view.readonly">
      <div class="dz-message">Bitte Dateien hier ablegen.</div>
    </div>
  </div>
</div>

And JS to set it up:

#!javascript

var widget, dropzone;
widget = new gocept.jsform.ListWidget($('#documents-list'), {
    default_form_actions: []
});
widget.load();

Dropzone.autoDiscover = false;
dropzone = new Dropzone('#upload', {
  'url': '${upload_url}',
  'headers': {
    'X-CSRF-Token': $('#csrf_token').val()
  }
});
dropzone.on('success', function (file, response) {
  widget.render_item(response);
  dropzone.removeFile(file);
});

Bitbucket: https://bitbucket.org/gocept/gocept.jsform/issue/28

sweh / ajja

ListWidget: Provide file upload widget using Dropzone #28