uploader.phtml 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <?php
  2. /**
  3. * Copyright © Magento, Inc. All rights reserved.
  4. * See COPYING.txt for license details.
  5. */
  6. // @codingStandardsIgnoreFile
  7. ?>
  8. <?php
  9. /** @var $block \Magento\Theme\Block\Adminhtml\Wysiwyg\Files\Content\Uploader */
  10. ?>
  11. <div id="<?= $block->getHtmlId() ?>" class="uploader">
  12. <span class="fileinput-button form-buttons">
  13. <span><?= /* @escapeNotVerified */ __('Browse Files') ?></span>
  14. <input id="fileupload" type="file" name="<?= /* @escapeNotVerified */ $block->getConfig()->getFileField() ?>"
  15. data-url="<?= /* @escapeNotVerified */ $block->getConfig()->getUrl() ?>" multiple>
  16. </span>
  17. <div class="clear"></div>
  18. <script id="<?= $block->getHtmlId() ?>-template" type="text/x-magento-template">
  19. <div id="<%- data.id %>" class="file-row">
  20. <span class="file-info"><%- data.name %> (<%- data.size %>)</span>
  21. <div class="progressbar-container">
  22. <div class="progressbar upload-progress" style="width: 0%;"></div>
  23. </div>
  24. <div class="clear"></div>
  25. </div>
  26. </script>
  27. </div>
  28. <script>
  29. require([
  30. 'jquery',
  31. 'mage/template',
  32. 'jquery/file-uploader',
  33. 'domReady!',
  34. 'mage/translate'
  35. ], function ($, mageTemplate) {
  36. $('#fileupload').fileupload({
  37. dataType: 'json',
  38. formData: {
  39. isAjax: 'true',
  40. form_key: FORM_KEY
  41. },
  42. sequentialUploads: true,
  43. maxFileSize: <?= /* @escapeNotVerified */ $block->getFileSizeService()->getMaxFileSize() ?> ,
  44. add: function (e, data) {
  45. var progressTmpl = mageTemplate('#<?= $block->getHtmlId() ?>-template'),
  46. fileSize,
  47. tmpl;
  48. $.each(data.files, function (index, file) {
  49. fileSize = typeof file.size == "undefined" ?
  50. $.mage.__('We could not detect a size.') :
  51. byteConvert(file.size);
  52. data.fileId = Math.random().toString(36).substr(2, 9);
  53. tmpl = progressTmpl({
  54. data: {
  55. name: file.name,
  56. size: fileSize,
  57. id: data.fileId
  58. }
  59. });
  60. $(tmpl).appendTo('#<?= $block->getHtmlId() ?>');
  61. });
  62. $(this).fileupload('process', data).done(function () {
  63. data.submit();
  64. });
  65. },
  66. done: function (e, data) {
  67. var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
  68. $(progressSelector).css('width', '100%');
  69. if (data.result && !data.result.hasOwnProperty('errorcode')) {
  70. $(progressSelector).removeClass('upload-progress').addClass('upload-success');
  71. MediabrowserInstance.handleUploadComplete();
  72. } else {
  73. $(progressSelector).removeClass('upload-progress').addClass('upload-failure');
  74. }
  75. },
  76. progress: function (e, data) {
  77. var progress = parseInt(data.loaded / data.total * 100, 10);
  78. var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
  79. $(progressSelector).css('width', progress + '%');
  80. },
  81. fail: function (e, data) {
  82. var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
  83. $(progressSelector).removeClass('upload-progress').addClass('upload-failure');
  84. }
  85. });
  86. });
  87. </script>