vendor/uvdesk/core-framework/Resources/views/Templates/attachment.html.twig line 1

Open in your IDE?
  1. <style>
  2.     input.attachment {
  3.         display: none;
  4.     }
  6.     .uv-element-block .uv-added-attachment {
  7.         color: #333333;
  8.         margin: -14px 5px;
  9.     }
  10. </style>
  12. <script type="text/javascript">
  13.     $(function () {
  14.         var FileView = Backbone.View.extend({
  15.             fileCounter: 0,
  16.             max_post_size: {{ max_post_size }},
  17.             max_file_uploads: {{ max_file_uploads }},
  18.             upload_max_filesize: {{ upload_max_filesize }},
  19.             el: '.attachment-block',
  20.             events : {
  21.                 'click .uv-file-label': 'createFileType',
  22.                 'change .attachment': 'selectFile',
  23.                 'click .uv-added-attachment span': 'removeFile',
  24.                 'click .uv-field-message': 'removeError',
  25.             },
  26.             createFileType: function(e) {
  27.                 this.removeError(e)
  28.                 var currentElement = Backbone.$(e.currentTarget),
  29.                     attachmentBlock = currentElement.parents('.attachment-block')
  30.                 if (attachmentBlock.children('.uv-added-attachment').length + 1 > this.max_file_uploads) {
  31.                     attachmentBlock.append(this.getDefaultErrorMessage())
  32.                     return;
  33.                 }
  34.                 this.fileCounter += 1;
  35.                 attachmentBlock.append('<div class="uv-added-attachment" style="display: none" id="file-' + this.fileCounter + '"><div class="uv-attachment"><input type="file" name="attachments[]" class="attachment" multiple="multiple"></div></div>')
  36.                 $('#file-' + this.fileCounter).find('.attachment').trigger('click')
  37.             },
  38.             labelTemplate: _.template('<div data-name="<%- fileName %>" class="uv-selected-attachment-item"><span></span><label class="file-name"><%- fileName %></label></div>'),
  39.             selectFile: function(e) {
  40.                 var currentElement = Backbone.$(e.currentTarget);
  41.                 var attachmentBlock = currentElement.parents(".uv-added-attachment");
  42.                 var isError = false;
  43.                 
  44.                 if (currentElement.length) {
  45.                     files = currentElement[0].files; 
  47.                     if (files.length) {
  48.                         for (var i = 0; i < files.length; i++) {
  49.                             var fileName = files[i].name;
  50.                             if (files[i].size > this.upload_max_filesize) {
  51.                                 isError = true;
  52.                                 break;
  53.                             }
  55.                             // Validating Form Size
  56.                             var formSize = 0
  57.                             var formData = new FormData(currentElement.parents('form')[0])
  58.                             
  59.                             for (var pair of formData.entries()) {
  60.                                 if (pair[1] instanceof Blob) {
  61.                                     formSize += pair[1].size
  62.                                 } else {
  63.                                     formSize += pair[1].length
  64.                                 }
  65.                             }
  67.                             if (formSize > this.max_post_size) {
  68.                                 isError = true
  69.                             }
  71.                             attachmentBlock.append(this.labelTemplate({
  72.                                 'fileName': fileName
  73.                             }));
  74.                         }
  75.                     }
  76.                 }
  77.                 
  78.                 if (isError) {
  79.                     attachmentBlock.parents('.attachment-block').append(this.getDefaultErrorMessage())
  80.                     attachmentBlock.remove()
  81.                     return
  82.                 }
  84.                 attachmentBlock.show()
  85.             },
  86.             removeFile: function(e) {
  87.                 this.removeError(e);
  88.                 let el = $(e.currentTarget).parent('.uv-selected-attachment-item');
  89.                 let inputEl = el.siblings('.uv-attachment').find('input');
  90.                 
  91.                 let fileCount = $("input[name='attachments[]']")[0].files.length;
  92.                 if (fileCount > 1) {
  93.                     console.log(fileCount);
  94.                     let fileName = el.data('name');
  95.                     let files = inputEl[0].files; 
  96.                     let dt = new DataTransfer();
  98.                     for (let i = 0; i < files.length; i++) {
  99.                         let file = files[i];
  100.                         if (el.data('name') != files[i].name) {
  101.                             dt.items.add(file);
  102.                         }
  103.                     }
  105.                     $("input[name='attachments[]']")[0].files = dt.files;
  106.                     el.remove();
  108.                     if ($("input[name='attachments[]']")[0].files.length == 0) {
  109.                         $('.uv-added-attachment').remove();
  110.                     }
  111.                 }
  113.                 Backbone.$(e.currentTarget).parents('.uv-added-attachment').remove();
  114.             },
  115.             getDefaultErrorMessage: function() {
  116.                 return '<span class="uv-field-message">You can send up to ' + Math.floor(this.upload_max_filesize/(1024*1024)) + ' MB in attachments. If you have more than one attachment, they can\'t add up to more than ' + Math.floor(this.max_post_size/(1024*1024))  + ' MB and ' + this.max_file_uploads + ' attachments in total.</span>'
  117.             },
  118.             removeError: function(e) {
  119.                 Backbone.$(e.currentTarget).parents('.attachment-block').find('.uv-field-message').remove()
  120.             }   
  121.         });
  122.         
  123.         var fileView = new FileView();
  124.     });
  125. </script>