app/Plugin/ProductPlus42/Resource/template/admin/Product/upload_js.twig line 1

Open in your IDE?
  1. {#
  2. * Plugin Name : ProductPlus
  3. *
  4. * Copyright (C) BraTech Co., Ltd. All Rights Reserved.
  5. * http://www.bratech.co.jp/
  6. *
  7. * For the full copyright and license information, please view the LICENSE
  8. * file that was distributed with this source code.
  9. #}
  11. <script>
  12. $(function() {
  13.     {% for ProductItem in ProductItems %}
  14.         {% if ProductItem.input_type == constant('Plugin\\ProductPlus42\\Entity\\ProductItem::IMAGE_TYPE') %}
  15.             {% set name = 'productplus_' ~ ProductItem.id %}
  16.             {% set image_name = 'productplus_' ~ ProductItem.id ~ '_images' %}
  17.             {% set add_name = 'productplus_' ~ ProductItem.id ~ '_add_images' %}
  18.             {% set delete_name = 'productplus_' ~ ProductItem.id ~ '_delete_images' %}
  19.             // ファイルアップロード
  20.             var inputFileElement = document.querySelector('#admin_product_productplus_{{ ProductItem.id}}');
  21.             FilePond.setOptions({
  22.                 server: {
  23.                     process: {
  24.                         url: '{{ path('admin_product_image_process') }}',
  25.                         headers: {
  26.                             'ECCUBE-CSRF-TOKEN': $('meta[name="eccube-csrf-token"]').attr('content'),
  27.                             'X-Requested-With': 'XMLHttpRequest'
  28.                         }
  29.                     },
  30.                     load: {
  31.                         url: '{{ path('admin_productplus_image_load') }}?source=',
  32.                         headers: {
  33.                             'X-Requested-With': 'XMLHttpRequest'
  34.                         }
  35.                     },
  36.                     revert: {
  37.                         url: '{{ path('admin_product_image_revert') }}',
  38.                         headers: {
  39.                             'ECCUBE-CSRF-TOKEN': $('meta[name="eccube-csrf-token"]').attr('content'),
  40.                             'X-Requested-With': 'XMLHttpRequest'
  41.                         }
  42.                     }
  43.                 }
  44.             });
  45.             var pond_{{ name }} = FilePond.create(inputFileElement, {
  46.                 allowFileTypeValidation: true,
  47.                 acceptedFileTypes: [
  48.                     'image/gif',
  49.                     'image/png',
  50.                     'image/jpeg'
  51.                 ],
  52.                 allowFileSizeValidation: true,
  53.                 maxFileSize: 10000000,
  54.                 maxFiles: 10,
  55.                 allowBrowse: true,
  56.                 allowDrop: true,
  57.                 allowReorder: true,
  58.                 labelIdle: '<i class="fa fa-cloud-upload fa-3x text-ec-lightGray mx-3 align-middle" aria-hidden="true" style="font-size: 40px"></i>{{ 'admin.common.drag_and_drop_image_description'|trans }}<span class="filepond--label-action">{{ 'admin.common.file_select'|trans }}</span>',
  59.                 // 保存されている画像のロード
  60.                 files: [
  61.                     {% for image in form[image_name] %}
  62.                     {
  63.                         source: '{{ image.vars.value }}',
  64.                         options: {
  65.                             type: 'local'
  66.                         }
  67.                     },
  68.                     {% endfor %}
  69.                     // 追加してすぐの画像のロード. バリデーションエラーの場合など.
  70.                     {% for add_image in form[add_name] %}
  71.                     {
  72.                         source: '{{ add_image.vars.value }}',
  73.                         options: {
  74.                             type: 'local'
  75.                         }
  76.                     },
  77.                     {% endfor %}
  78.                 ]
  79.             });
  80.             // 画像が追加されたら add_images にファイル名を追加する
  81.             var proto_add_{{ name }} = '{{ form_widget(form[add_name].vars.prototype) }}';
  82.             pond_{{ name }}.on('processfile', function(error, file) {
  83.                 if (error) {
  84.                     console.log(error);
  85.                 } else {
  86.                     $('#upload-zone-{{ProductItem.id}}').append(
  87.                         $(proto_add_{{ name }}.replace(/__name__/g, file.id))
  88.                             .val(file.serverId)
  89.                             .addClass('productplus_{{ProductItem.id}}_add_images')
  90.                     );
  91.                 }
  92.             });
  93.             // 画像が削除されたら delete_images にファイル名を追加する
  94.             var proto_del_{{ name }} = '{{ form_widget(form[delete_name].vars.prototype) }}';
  95.             pond_{{ name }}.on('removefile', function(error, file) {
  96.                 if (error) {
  97.                     console.log(error);
  98.                 } else {
  99.                     // file.serverId にはアップロードしたファイル名が格納される.
  100.                     // DBに登録されると URL path が入るためファイル名のみ抜き出す.
  101.                     if (file.serverId) {
  102.                         $('#upload-zone-{{ProductItem.id}}').append(
  103.                             $(proto_del_{{ name }}.replace(/__name__/g, file.id))
  104.                                 .val(file.serverId.split('/').pop())
  105.                                 .addClass('productplus_{{ProductItem.id}}_del_images')
  106.                         );
  107.                     }
  108.                     // 追加してすぐ削除した画像があれば削除する
  109.                     $('#upload-zone-{{ProductItem.id}}').find('#admin_product_productplus_{{ProductItem.id}}_add_images_' + file.id).remove(); // 追加してすぐ削除した画像
  110.                     $('#upload-zone-{{ProductItem.id}}').find('.productplus_{{ProductItem.id}}_add_images[value="' + file.filename + '"]').remove(); // 追加後, バリデーションエラーが発生した後に削除した画像
  111.                 }
  112.             });
  113.             pond_{{ name }}.on('reorderfiles', function(files, origin, target) {
  114.                 $image_files = $('[name^="admin_product[productplus_{{ProductItem.id}}_images]"]');
  115.                 $target = $image_files.parent();
  116.                 $image_files.remove();
  117.                 for(index in files){
  118.                     $target.append('<input type="hidden" id="admin_product_productplus_{{ProductItem.id}}_images_' + index + '" name="admin_product[productplus_{{ProductItem.id}}_images]['+ index +']" value="'+ files[index].filename +'" class="productplus_{{ProductItem.id}}_images">');
  119.                 }
  120.             });
  121.             // バリデーションエラーが出た場合に画像を保持するための hidden を追加しておく
  122.             var proto_image_{{ name }} = '{{ form_widget(form[image_name].vars.prototype) }}';
  123.             {% for image in form[image_name] %}
  124.                 $('#upload-zone-{{ProductItem.id}}').append(
  125.                     $(proto_image_{{ name }}.replace(/__name__/g, '{{ loop.index0 }}'))
  126.                         .val('{{ image.vars.value }}')
  127.                         .addClass('productplus_{{ProductItem.id}}_images')
  128.                 );
  129.             {% endfor %}
  130.             {% for add_image in form[add_name] %}
  131.                 $('#upload-zone-{{ProductItem.id}}').append(
  132.                     $('{{ form_widget(add_image) }}')
  133.                         .val('{{ add_image.vars.value }}')
  134.                         .addClass('productplus_{{ProductItem.id}}_add_images')
  135.                 );
  136.             {% endfor %}
  137.             {% for delete_image in form[delete_name] %}
  138.                 $('#upload-zone-{{ProductItem.id}}').append(
  139.                     $('{{ form_widget(delete_image) }}').addClass('productplus_{{ProductItem.id}}_del_images')
  140.                 );
  141.             {% endfor %}
  142.         {% endif %}
  143.     {% endfor %}
  144. })
  145. </script>