Magento 2 Documentation  2.3
Documentation for Magento 2 CMS v2.3 (December 2018)
js.phtml
Go to the documentation of this file.
1 <?php
6 ?>
7 <?php ?>
8 <?= $block->getFormHtml() ?>
9 
10 <script>
11 require([
12  "jquery",
13  "mage/template",
14  "Magento_Ui/js/modal/alert",
15  "jquery/file-uploader",
16  "Magento_Theme/js/sortable",
17  "mage/translate"
18 ], function ($, mageTemplate, alert) {
19 
20  $('#js_files_uploader').fileupload({
21  dataType: 'json',
22  replaceFileInput: false,
23  sequentialUploads: true,
24  url: '<?= /* @escapeNotVerified */ $block->getJsUploadUrl() ?>',
25 
31  add: function (e, data) {
32  var progressTmpl = mageTemplate('#js-file-uploader-template'),
33  fileSize,
34  tmpl;
35 
36  $.each(data.files, function (index, file) {
37  fileSize = typeof file.size == "undefined" ?
38  $.mage.__('We could not detect a size.') :
39  byteConvert(file.size);
40 
41  data.fileId = Math.random().toString(36).substr(2, 9);
42 
43  tmpl = progressTmpl({
44  data: {
45  name: file.name,
46  size: fileSize,
47  id: data.fileId
48  }
49  });
50 
51  $(tmpl).appendTo('#js-file-uploader');
52  });
53 
54  var uploadButton = $('#js_uploader_button');
55  uploadButton.removeAttr('disabled');
56 
57  uploadButton.click(function () {
58  $('#messages').html('');
59  $(this).attr('disabled', 'disabled');
60 
61  data.submit();
62  });
63  },
64 
70  done: function (e, data) {
71  $('#no-js-files-found').remove();
72 
73  var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
74  $(progressSelector).css('width', '100%');
75 
76  $(this).val('');
77 
78  if (!data.result.error) {
79  $(progressSelector).removeClass('upload-progress').addClass('upload-success');
80 
81  $('#' + data.fileId).delay(2000).fadeOut(2000);
82  $('body').trigger('refreshJsList', {
83  jsList: data.result.files
84  });
85  } else {
86  $(progressSelector).removeClass('upload-progress').addClass('upload-failure');
87  }
88 
89  $('.ui-sortable').sortable('initButtons');
90  },
91 
97  progress: function (e, data) {
98  var progress = parseInt(data.loaded / data.total * 100, 10);
99  var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
100  $(progressSelector).css('width', progress + '%');
101  },
102 
108  fail: function (e, data) {
109  var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
110  $(progressSelector).removeClass('upload-progress').addClass('upload-failure');
111 
112  $(this).val('');
113  alert({
114  content: $.mage.__("We don't recognize this file extension.")
115  });
116  }
117  });
118 
119  $('#js_files_uploader').click(function () {
121  $('#js-file-uploader').html('');
122  $('#js_uploader_button').unbind('click');
123  });
124 
125 
126 });
127 </script>
$block
Definition: block.php:8
else function()