Symfony Profiler

{% block javascript %}
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
{% if type == 'coordinate_confirm' %}
<script>
$(function () {
FilePond.registerPlugin(FilePondPluginImagePreview);
// 共通のサーバーオプション設定
var commonServerOptions = {
server: {
process: {
url: '{{ path('coordinate_image_process', { id: form.vars.id }) }}',
headers: {
'ECCUBE-CSRF-TOKEN': $('meta[name="eccube-csrf-token"]').attr('content'),
'X-Requested-With': 'XMLHttpRequest'
}
},
load: {
url: '{{ path('coordinate_image_load') }}',
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
},
revert: {
url: '{{ path('coordinate_image_revert') }}',
headers: {
'ECCUBE-CSRF-TOKEN': $('meta[name="eccube-csrf-token"]').attr('content'),
'X-Requested-With': 'XMLHttpRequest'
}
}
}
};
FilePond.setOptions(commonServerOptions);
var inputFileElement = document.querySelector('input[type=file]');
var pond = FilePond.create(inputFileElement, {
allowFileTypeValidation: true,
acceptedFileTypes: [
'image/gif',
'image/png',
'image/jpeg'
],
allowFileSizeValidation: true,
maxFileSize: 10000000,
allowBrowse: true,
allowDrop: true,
allowReorder: true,
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>',
styleItemPanelAspectRatio: 0.5625,
files: [
{% for image in form.images %}
{
source: '{{ image.vars.value }}',
options: {
type: 'local'
}
},
{% endfor %}
// 追加してすぐの画像のロード. バリデーションエラーの場合など.
{% for add_image in form.add_images %}
{
source: '{{ add_image.vars.value }}',
options: {
type: 'local'
}
},
{% endfor %}
]
});
// 画像が追加されたら add_images にファイル名を追加する
var proto_add = '{{ form_widget(form.add_images.vars.prototype) }}';
pond.on('processfile', function(error, file) {
if (error) {
console.log(error);
} else {
$('#upload-zone').append(
$(proto_add.replace(/__name__/g, file.id))
.val(file.serverId)
.addClass('add_images')
);
}
});
// 画像が削除されたら delete_images にファイル名を追加する
var proto_del = '{{ form_widget(form.delete_images.vars.prototype) }}';
pond.on('removefile', function(error, file) {
if (error) {
console.log(error);
} else {
// file.serverId にはアップロードしたファイル名が格納される.
if (file.serverId) {
$('#upload-zone').append(
$(proto_del.replace(/__name__/g, file.id))
.val(file.serverId)
.addClass('del_images')
);
}
// 追加してすぐ削除した画像があれば削除する
$('#upload-zone').find('#{{ form.vars.id }}_add_images_' + file.id).remove(); // 追加してすぐ削除した画像
$('#upload-zone').find('.add_images[value="' + file.filename + '"]').remove(); // 追加後, バリデーションエラーが発生した後に削除した画像
}
});
pond.on('initfile', function() {
$('#product_image_error').hide();
});
pond.on('error', function(error, file) {
var message = '{{ 'admin.common.upload_error'|trans }}';
if (error.main !== undefined) {
message = `${error.main}: ${error.sub}`;
}
$('#product_image_error')
.show()
.find('.form-error-message').text(message);
// エラーメッセージが表示されてからプレビューエリアのエラーメッセージを非表示にする
setTimeout(function() {
$('.filepond--file-status').hide();
}, 300);
});
// バリデーションエラーが出た場合に画像を保持するための hidden を追加しておく
var proto_image = '{{ form_widget(form.images.vars.prototype) }}';
{% for image in form.images %}
$('#upload-zone').append(
$(proto_image.replace(/__name__/g, '{{ loop.index0 }}'))
.val('{{ image.vars.value }}')
.addClass('images')
);
{% endfor %}
{% for add_image in form.add_images %}
$('#upload-zone').append(
$('{{ form_widget(add_image) }}')
.val('{{ add_image.vars.value }}')
.addClass('add_images')
);
{% endfor %}
{% for delete_image in form.delete_images %}
$('#upload-zone').append(
$('{{ form_widget(delete_image) }}').addClass('del_images')
);
{% endfor %}
});
</script>
{% endif %}
{% endblock %}

app/template/default/Contact/form_js.twig line 1