I have a form in the admin that handles file uploads of different kind of media - video, audio and photos. I want to show a preview or maybe even provide a link to a modal of the file on the edit form.
I've have my custom twig template below which loads fine positioning everything as expected but doesn't render the preivew at the media file's help element which is where I need help with
{% elseif form.children|length > 0 %}
<fieldset>
<div class="sonata-ba-collapsed-fields">
{% for nested_group_field_name, nested_group_field in form.children %}
{% for field_name, nested_field in nested_group_field.children %}
<div class="control-group">
<label class="control-label" for="nested_field.vars['sonata_admin'].admin.trans(nested_field.vars.label" {{ nested_field.vars['required'] ? 'class="required"' : '' }}>{{ nested_field.vars['sonata_admin'].admin.trans(nested_field.vars.label) }}</label>
<div class="controls">
{% if sonata_admin.field_description.associationadmin.formfielddescriptions[field_name] is defined %}
{{ form_widget(nested_field, {
'inline': 'natural',
'edit' : 'inline'
}) }}
{% set dummy = nested_group_field.setrendered %}
{% else %}
{{ form_widget(nested_field) }}
{% endif %}
{% if sonata_admin.field_description.help %}
<span class="help-block sonata-ba-field-help">{{ sonata_admin.admin.trans(sonata_admin.field_description.help, {}, sonata_admin.field_description.translationDomain)|raw }}</span>
{% endif %}
</div>
</div>
{% endfor %}
{% endfor %}
</div>
</fieldset>
{% endif %}
Here's the Admin form builder
protected function configureFormFields(FormMapper $formMapper)
{
$media = $this->getSubject();
// use $fileFieldOptions so we can add other options to the field
$fileFieldOptions = array('required' => false,'label' => 'File', 'attr' => array("multiple" => "multiple"), 'by_reference' => false);
if ($media && ($webPath = $media->getWebPath())) {
if($media->getFormat()->getMediaType()=='Photo')
{
$fileFieldOptions['help'] = '<img src="'.$webPath.'" class="admin-preview" />';
}
elseif($media->getFormat()->getMediaType()=='Audio' || ($media->getFormat()->getMediaType()=='Video'))
{
$fileFieldOptions['help'] = '<script type="text/javascript">
$(document).ready(function(){
$("#jplayer_'.$media->getId().'").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {'.
$media->getFormat().': "'.$webPath.'"
});
},
swfPath: "/js",
supplied: "'.$media->getFormat().'"
});
});
</script>
<div id="jquery_jplayer_1"></div>
<div id="jp_container_1">
<a href="#" class="jp-play">Play</a>
<a href="#" class="jp-pause">Pause</a>
</div><div class="jplayer_'.$media->getId().'"></div>';
}
}
$formMapper
->add('title','text',array('label'=>'Title'))
->add('abstract','textarea',array('label'=>'Abstract'))
->add('language')
->add('format')
->add('file', 'file', $fileFieldOptions)
->add('quality')
;
}