Multi Image Upload not showing thumbnails in uploader

[cgriem]

I implemented a multi image upload in my form and entity as described in documentation, uploaded images work fine in frontend and config should be correct but still the thumbnails aren't sown on the uploader, all I get is the broken image symbol and when I call the thumbnail url I get the following error:

Catchable Fatal Error: Argument 1 passed to Liip\ImagineBundle\Imagine\Filter\FilterManager::applyFilter() must be an instance of Liip\ImagineBundle\Binary\BinaryInterface, instance of Imagine\Gd\Image given, called in project_root/vendor/thrace-project/media-bundle/Thrace/MediaBundle/Controller/ImageController.php on line 121 and defined

Here is the MultiImage entity:

use Doctrine\ORM\Mapping as ORM;
use Thrace\MediaBundle\Entity\AbstractMultiImage;

/**
 * @ORM\Entity
 */
class MultiImage extends AbstractMultiImage
{
    /**
     * @var integer
     *
     * @ORM\Id @ORM\Column(name="id", type="integer")
     *
     * @ORM\GeneratedValue(strategy="AUTO")
     */
    protected $id;

    public function getUploadDir()
    {
        return '/media/images/deal';
    }
}

and here the related parts of my entity that should hold the images:

//...
/**
     * @ORM\ManyToMany(targetEntity="MultiImage", cascade={"all"})
     * @ORM\OrderBy({"position" = "ASC"})
     * @ORM\JoinTable(
     *   inverseJoinColumns={@ORM\JoinColumn(unique=true,  onDelete="CASCADE")}
     * )
     */
    protected $files;
//...
    public function __construct()
    {
        //...
        $this->files = new ArrayCollection();
        //...
    }
//...
    public function addFile(MultiImageInterface $file)
    {
        if (!$this->files->contains($file)){
            $this->files->add($file);
        }
    }

    public function getFiles()
    {
        return $this->files;
    }

    public function removeFile(MultiImageInterface $file)
    {
        if ($this->files->contains($file)){
            $this->files->removeElement($file);
        }
    }
//...

my implementation in the template:

{% block stylesheets %}
        {{ parent() }}
        {% stylesheets
        'jquery-ui/jquery-ui.min.css'
        'jquery-ui/jquery-ui.structure.min.css'
        'jquery-ui/jquery-ui.theme.min.css'
        'plupload/jquery.ui.plupload/css/jquery.ui.plupload.css'
        'colorbox/colorbox.css'
        'jcrop/css/jquery.Jcrop.min.css'
        'bundles/thracemedia/css/base.css'
        %}
        <link rel="stylesheet" href="{{ asset_url }}" />
        {% endstylesheets %}

    {% endblock %}

    {% block javascripts %}
        {{ parent() }}
        {% javascripts
        'jquery-ui/jquery-ui.min.js'
        'plupload/moxie.min.js'
        'plupload/plupload.full.min.js'
        'plupload/jquery.ui.plupload/jquery.ui.plupload.min.js'
        'colorbox/jquery.colorbox-min.js'
        'jcrop/js/jquery.color.js'
        'jcrop/js/jquery.Jcrop.min.js'
        'bundles/thracemedia/js/multi-image-upload.js'
        %}
    {% endblock %}

    {% form_theme edit_form with ['ThraceMediaBundle:Form:fields.html.twig'] %}
    <form action="" method="post" {{ form_enctype(edit_form) }} novalidate="novalidate">
        {{ form_widget(edit_form) }}
    </form>

also the code used in the form type:

//...
->add('files', 'thrace_multi_image_upload_collection', array(
                'label' => 'Images',
                'options' => array(
                    'data_class' => '\GP\Bundle\DealBundle\Entity\MultiImage',
                ),
                'configs' => array(
                    'minWidth' => 300,
                    'minHeight' => 100,
                    'extensions' => 'jpeg,jpg,png',
                    'identifier' => 'plupload',
                    'max_upload_size' => '4000000',
                    'filter' => 'deal_carousel_big'
                )
            ));
//...

the parameters for the identifier:

parameters:
    plupload:
            max_upload_size: 4000000
            extensions: 'jpeg,jpg,png'
            minWidth: 10
            minHeight: 10

my config for the bundle:

knp_gaufrette:
    adapters:
        media:
            local:
                directory: %kernel.root_dir%/../web/media
        temp:
            local:
                directory: %kernel.root_dir%/../web/media/temp
    filesystems:
        media:
            adapter:    media
            alias:      media_filesystem
        temp:
            adapter:    temp
            alias:      temp_filesystem

thrace_media:
    temporary_filesystem_key: temp
    media_filesystem_key: media

and lastly the routing:

thrace_media_backend:
    resource: "@ThraceMediaBundle/Resources/config/routing/backend.xml"
    prefix:   /admin

thrace_media_frontend:
    resource: "@ThraceMediaBundle/Resources/config/routing/frontend.xml"
    prefix:   /

Can anyone help me fixing this? I tried about everything I could come up with but with no results

[henrypenny]

I have the same issue. If you use liip/imagine-bundle 0.20.0 it works. But the latest version of liip/imagine-bundle filter manager requires a Liip BinaryInterface instance.

So basically the filter won't work in this situation. I made some changes in Thrace\MediaBundle\Controller\ImageController in my local copy. This works - however it doesn't resize the image:

    $name = $this->getRequest()->get('name');
    $filter = $this->getRequest()->get('filter');

    $imageManager = $this->container->get('thrace_media.imagemanager');

    $filterManager = $this->container->get('liip_imagine.filter.manager');

    try{
        $image = $imageManager->loadTemporaryImageByName($name);
    } catch (FileNotFound $e){
        throw new NotFoundHttpException();
    }

    //$content = $filterManager->applyFilter($image, $filter);

    $response = new Response($image);
    $response->headers->set('Accept-Ranges', 'bytes');
    $response->headers->set('Content-Length', mb_strlen($image));
    $response->headers->set('Content-Type', $this->getMimeType($image));
    $response->expire();

    return $response;