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;
  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])
  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. }
  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');
  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. });
  123. var fileView = new FileView();
  124. });
  125. </script>