I am using kartik file input widget to upload image with their particular image caption.
Below is my code which throws: Uncaught SyntaxError: Invalid or unexpected token Can anyone help what is wrong here?
<?php
use yii\helpers\Html;
use yii\helpers\Url;
use yii\widgets\ActiveForm;
use yii\helpers\ArrayHelper;
use backend\models\Album;
use kartik\file\FileInput;
use yii\web\UploadedFile;
?>
<div class="albummedia-form">
<?php $form = ActiveForm::begin(); ?>
<?= $form->field($model, 'albumID')->dropDownList(ArrayHelper::map(Album::find()->all(),'albumID','albumName'),['prompt' => 'Select Album']) ?>
<?= $form->field($model, 'albummediaCaption')->textInput(['maxlength' => true]) ?>
<?php echo FileInput::widget([
'name' => 'albummediaFile[]',
'id' => "input-706",
'class' => "file-loading",
'options'=>[
'multiple'=>true
],
'pluginOptions' => [
'uploadUrl' => Url::to(['uploads/Album_Media']),
'maxFileCount' => 10
]
]); ?>
<?php $form->field($model, 'albummediaFavCount')->textInput() ?>
<?php $form->field($model, 'albummediaCreatedDate')->textInput() ?>
<div class="form-group">
<?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>
</div>
<?php
$script = <<< JS
var el2 = $('#input-706');
var footerTemplate = '<div class="file-thumbnail-footer">\n' +
' <div style="margin:5px 0">\n' +
' <input class="kv-input kv-new form-control input-sm text-center {TAG_CSS_NEW}" value="{caption}" placeholder="Enter caption...">\n' +
' <input class="kv-input kv-init form-control input-sm text-center {TAG_CSS_INIT}" value="{TAG_VALUE}" placeholder="Enter caption...">\n' +
' </div>\n' +
' {size}\n' +
' {actions}\n' +
'</div>';
el2.fileinput({
uploadUrl: '/file-upload-batch/2',
uploadAsync: false,
maxFileCount: 5,
overwriteInitial: false,
layoutTemplates: {footer: footerTemplate, size: '<samp><small>({sizeText})</small></samp>'},
previewThumbTags: {
'{TAG_VALUE}': '', // no value
'{TAG_CSS_NEW}': '', // new thumbnail input
'{TAG_CSS_INIT}': 'hide' // hide the initial input
},
initialPreviewAsData: true,
initialPreview: [
"http://lorempixel.com/1920/1080/city/1",
"http://lorempixel.com/1920/1080/city/2",
],
initialPreviewConfig: [
{caption: "City-1.jpg", size: 327892, height: "120px", url: "/site/file-delete", key: 1},
{caption: "City-2.jpg", size: 438828, width: "120px", url: "/site/file-delete", key: 2},
],
initialPreviewThumbTags: [
{'{TAG_VALUE}': 'City-1.jpg', '{TAG_CSS_NEW}': 'hide', '{TAG_CSS_INIT}': ''},
{
'{TAG_VALUE}': function() { // callback example
return 'City-2.jpg';
},
'{TAG_CSS_NEW}': 'hide',
'{TAG_CSS_INIT}': ''
}
],
uploadExtraData: function() { // callback example
var out = {}, key, i = 0;
$('.kv-input:visible').each(function() {
var el = $(this);
key = el.hasClass('kv-new') ? 'new_' + i : 'init_' + i;
out[key] = el.val();
i++;
});
return out;
}
});
JS;
$this->registerJs($script);
?>