Vich Uploader Twig Fields

admin.js

/**
 *
 * @type {{attachListeners: adminNs.attachListeners, showPreview: adminNs.showPreview, hideUploadPreviews: adminNs.hideUploadPreviews, init: adminNs.init}}
 */
var adminNs =
{
    /**
     * Attach any Listeners for Admin functions
     * @returns {boolean}
     */
    attachListeners : function() {
        $("input.vichImage").on("change",adminNs.showPreview);
        return true;
    },

    /**
     * Show a preview image when Vich Image widgets are changed.
     * @param e Event
     * @returns {boolean}
     */
    showPreview : function(e)
    {
        var input = e.currentTarget;
        var files = input.files;

        if (files && files[0]) {
            var reader = new FileReader();
            var container = $(input).siblings(".thumbnail.vichPreview");
            var img = container.find("img");
            reader.onload = function (e) {
                img.attr('src', e.target.result)
                    .width(150)
                    .height(150);
                container.fadeIn('fast');
            };

            reader.readAsDataURL(files[0]);
        }

        return true;
    },

    /**
     * helper function to make sure Vich preview images are not showing before the src attribute is set
     * @returns {boolean}
     */
    hideUploadPreviews : function() {
        $(".thumbnail.vichPreview").hide();

        return true;
    },

    /**
     * Primary Admin initialization method.
     * @returns {boolean}
     */
    init: function() {

        adminNs.attachListeners();
        adminNs.hideUploadPreviews();
        return true;
    }
};


$(function() {
    adminNs.init();
});

BaseFileType.php

<?php

namespace AppBundle\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Vich\UploaderBundle\Form\Type\VichFileType;

class BaseFileType extends AbstractType
{
    /**
     * @param FormBuilderInterface $builder
     * @param array $options
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
          ->add('file', VichFileType::class, array(
            'required'      => false,
            'allow_delete'  => true, // not mandatory, default is true
            'download_link' => true, // not mandatory, default is true
            'label' => 'PDF File'
          ))
            ->add('name',TextType::class,['required'=>false, 'attr'=>["help"=>"Name will display in the download button as 'Download (name)'","placeholder"=>"Name"]])
        ;
    }
    
    /**
     * @param OptionsResolver $resolver
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'data_class' => 'Common\ContentBundle\Entity\BaseFile'
        ));
    }
}

BaseImageType.php

<?php

namespace AppBundle\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Vich\UploaderBundle\Form\Type\VichImageType;

class BaseImageType extends AbstractType
{
    /**
     * @param FormBuilderInterface $builder
     * @param array $options
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('imageFile', VichImageType::class, array(
                'required'      => false,
                'allow_delete'  => true, // not mandatory, default is true
                'download_link' => true, // not mandatory, default is true
                'label' => 'Image'
            ))
            ->add('name',TextType::class,['required'=>false, 'attr'=>['help'=>"Name is for internal use only",'placeholder'=>'Name']])
        ;
    }

    /**
     * @param OptionsResolver $resolver
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'data_class' => 'AppBundle\Entity\BaseImage'
        ));
    }
}

fields.html.twig

{% block vich_file_row -%}
    {% set force_error = true %}
    {{- block('form_row') }}
{%- endblock %}


{% block vich_file_widget %}
    {% spaceless %}
        <div class="vich-form-file">
            {% if download_uri is defined and download_uri %}
                <p>
                    <strong>CurrentFile: </strong>
                    <a href="{{ download_uri }}" class="vich-download-link">
                        <i class="fa fa-download"></i> {{ 'download'|trans({}, 'VichUploaderBundle') }}
                    </a>
                </p>
                <p>Replace this file:</p>
            {% endif %}
                {{ form_widget(form.file) }}
            {% if form.delete is defined %}
                <div class="vich-delete-form">
                    {{ form_widget(form.delete) }}
                </div>
            {% endif %}

        </div>
    {% endspaceless %}
{% endblock %}

{% block vich_image_row -%}
    {% set force_error = true %}
    {{- block('form_row') }}
{%- endblock %}

{% block vich_image_widget %}
    {% spaceless %}
        <div class="vich-form-image">
            {% if download_uri is defined and download_uri %}
            <div class="thumbnail vichPreview">
                <img />
            </div>
            {% endif %}
                {{ form_widget(form.file, {'attr': {'class': 'vichImage'}}) }}

            {% if form.delete is defined %}
                <div class="vich-delete-form">
                    {{ form_widget(form.delete) }}
                </div>
            {% endif %}
            {% if download_uri is defined and download_uri is not empty %}
            <div class="image-preview">
                <a href="{{ download_uri }}">
                    <img src="{{ download_uri }}" alt="" />
                </a>
            </div>
            {% endif %}
            {% if show_download_link and download_uri is defined and download_uri%}
            <a href="{{ download_uri }}" class="vich-download-link">
                <span>{{ 'download'|trans({}, 'VichUploaderBundle') }}</span>
            </a>
            {% endif %}
            {{ form_errors(form.file) }}
        </div>
    {% endspaceless %}
{% endblock %}

{% block color_widget %}
    {% spaceless %}
        {% set type = 'color' %}
        {{ block('form_widget_simple') }}
    {% endspaceless %}
{% endblock %}