indico/modules/attachments/templates/upload.html

   1 {% from 'forms/_form.html' import form_header, form_footer, form_rows, form_row %}
   2
   3 {%- block content %}
   4     {{ form_header(form, id='dropzone', classes='dropzone', action=action) }}
   5     {% if existing_attachment %}
   6         <div class="form-group" id="form-group-protected">
   7             <div class="form-label form-block">
   8                 <label>{% trans %}File{% endtrans %}</label>
   9             </div>
  10             <div class="form-field form-block">
  11                 <div class="dropzone-area">
  12                     <div class="dropzone-area-inner">
  13                         <div class="dropzone-previews">
  14                             <div class="dz-message"></div>
  15                         </div>
  16                         <div class="select-files-btn">
  17                             <button type="button" class="i-button">
  18                                 {%- trans %}Choose from your computer{% endtrans -%}
  19                             </button>
  20                         </div>
  21                     </div>
  22                 </div>
  23                 <p class="form-field-description">
  24                     <em>{% trans %}Already uploaded file. Replace it by adding a new file.{% endtrans %}</em>
  25                 </p>
  26             </div>
  27         </div>
  28         <input id="file-change-trigger" type="hidden" value="0" name="__file_change_trigger">
  29     {% else %}
  30         <div class="dropzone-area">
  31             <div class="dropzone-previews">
  32                 <div class="dz-message">
  33                   {% trans %}Drag files here{% endtrans %}
  34                   <span class="message-seperator">- or -</span>
  35                 </div>
  36             </div>
  37             <div class="select-files-btn">
  38                 <button class="i-button" type="button">
  39                     {%- trans %}Choose from your computer{% endtrans -%}
  40                 </button>
  41             </div>
  42         </div>
  43     {% endif %}
  44     {{ form_rows(form, skip=('folder', 'protected', 'acl')) }}
  45     {{ form_row(form.folder) }}
  46     {{ form_row(form.protected) }}
  47     {{ form_row(form.acl, allow_missing=true) }}
  48     {% call form_footer(attach_form) %}
  49         <div class="dropzone-upload-btn">
  50             {% if existing_attachment -%}
  51                 <input class="i-button big highlight js-dropzone-save" type="submit"
  52                        value="{% trans %}Save{% endtrans %}" data-disabled-until-change>
  53             {%- else -%}
  54                 <input class="i-button big highlight js-dropzone-upload" type="submit" disabled
  55                    value="{% trans %}Upload{% endtrans %}">
  56             {% endif %}
  57             <button class="i-button big" data-button-back>{% trans %}Cancel{% endtrans %}</button>
  58         </div>
  59     {% endcall %}
  60     <script>
  61         (function() {
  62             'use strict';
  63
  64             $('#folder').nullableselector();
  65             aclIfProtected($('#protected'), $('#acl'));
  66             $('#dropzone').dropzone({
  67                 clickable: '.dropzone-area',
  68                 previewsContainer: '.dropzone-previews',
  69                 autoProcessQueue: false,
  70                 uploadMultiple: true,
  71                 parallelUploads: 999,
  72                 maxFiles: 10,
  73                 paramName: function() { return 'file'; },
  74                 init: function() {
  75                     var uploadButton = $('.js-dropzone-upload');
  76                     var saveButton = $('.js-dropzone-save');
  77                     var self = this;
  78                     var form = $('#dropzone');
  79
  80                     {% if existing_attachment %}
  81                         self.options.maxFiles = 1;
  82                         var existingFile = {
  83                             name: {{ existing_attachment.file.filename | tojson}},
  84                             size: {{ existing_attachment.file.size | tojson }},
  85                             accepted: true
  86                         };
  87
  88                         self.emit('addedfile', existingFile);
  89                         $('.dz-progress').hide();
  90                         self.files[0] = existingFile;
  91                     {% endif %}
  92
  93                     uploadButton.on('click', function(e) {
  94                         e.preventDefault();
  95                         e.stopPropagation();
  96                         $('.dz-progress').show();
  97                         self.processQueue();
  98                     });
  99
 100                     saveButton.on('click', function(e) {
 101                         if (self.getQueuedFiles().length) {
 102                             e.preventDefault();
 103                             e.stopPropagation();
 104                         }
 105                         $('.dz-progress').show();
 106                         self.processQueue();
 107                     });
 108
 109                     self.on('addedfile', function() {
 110                         {% if existing_attachment %}
 111                             self.removeFile(self.files[0]);
 112                             $('#file-change-trigger').val('1');
 113                             $('#dropzone').trigger('change');
 114                         {% endif %}
 115                         uploadButton.prop('disabled', false);
 116                         $('.dz-message').hide();
 117                         $('.dz-progress').hide();
 118                     });
 119
 120                     self.on('sendingmultiple', function() {
 121                         form.trigger('ajaxDialog:beforeSubmit');
 122                     });
 123
 124                     self.on('successmultiple', function(e, response) {
 125                         form.trigger('ajaxDialog:success', [response]);
 126                     });
 127
 128                     self.on('error', function(e, msg, xhr) {
 129                         if (xhr) {
 130                             form.trigger('ajaxDialog:error', [xhr]);
 131                         }
 132                     });
 133                 }
 134             });
 135         })();
 136     </script>
 137 {%- endblock %}