Thumbs don't apear when pictures are selected

[rpostolov]

Hi,

I have an issue with uploading pictures.

I'm on Symfony 2.7.3

The probleme is when i click the button 'choose file' and then when i select pictures, the thumb don't appear. i have only a message, see bellow :

Here is my config.yml

###########################################################   
#Uploader
admingenerator_form_extensions:
    image_manipulator: liip_imagine
    upload_manager: vich_uploader

liip_imagine:
    resolvers:
       default:
          web_path: ~

    filter_sets:
        cache: ~

        ########################################################################

        thumb_admin_list:
            quality: 100
            filters:
                thumbnail: { size: [150, 150], mode: inset }

        thumb_admin_list_small:
            quality: 100
            filters:
                thumbnail: { size: [150, 100], mode: inset }

        thumb_admin_medium:
            quality: 100
            filters:
                thumbnail: { size: [300, 200], mode: inset } 

        thumb_small:
            quality: 100
            filters:
                thumbnail: { size: [300, 200], mode: inset }

        thumb_medium:
            quality: 100
            filters:
                thumbnail: { size: [400, 390], mode: inset }

        thumb_large:
            quality: 100
            filters:
                thumbnail: { size: [700, 460], mode: inset }   

        thumb_xlarge:
            quality: 100
            filters:
                thumbnail: { size: [1050, 750], mode: inset } 

        thumb_xxlarge:
            quality: 100
            filters:
                thumbnail: { size: [2000, 700], mode: inset }                 

        ########################################################################

vich_uploader:
    db_driver: orm 
    twig:       true

    storage:    file_system
    mappings:
        page_image:
            uri_prefix:         /images/page
            upload_destination: %kernel.root_dir%/../web/images/page
            namer:              vich_uploader.namer_uniqid
            inject_on_load:     true   
            delete_on_update:   true
            delete_on_remove:   true  
        book_image:
            uri_prefix:         /images/page
            upload_destination: %kernel.root_dir%/../web/images/book
            namer:              vich_uploader.namer_uniqid
            inject_on_load:     true   
            delete_on_update:   true
            delete_on_remove:   true  
        item_image:
            uri_prefix:         /images/item
            upload_destination: %kernel.root_dir%/../web/images/item
            namer:              vich_uploader.namer_uniqid
            inject_on_load:     true   
            delete_on_update:   true
            delete_on_remove:   true 
        proposal_photo:
            uri_prefix:         /images/proposal/photos
            upload_destination: %kernel.root_dir%/../web/images/proposal/photos
            namer:              vich_uploader.namer_uniqid
            inject_on_load:     true   
            delete_on_update:   true
            delete_on_remove:   true   

And here is my entity Photo

<?php

namespace Ip\ProposalBundle\Entity;

use Doctrine\ORM\Mapping as ORM;
use Admingenerator\FormExtensionsBundle\Form\Model\UploadCollectionFileInterface;
use Vich\UploaderBundle\Mapping\Annotation as Vich;
use Symfony\Component\HttpFoundation\File\File;

/**
 * Photo
 *
 * @ORM\Table(name="proposal_photo")
 * @ORM\Entity(repositoryClass="Ip\ProposalBundle\Entity\PhotoRepository")
 * @Vich\Uploadable 
 * @ORM\HasLifecycleCallbacks() 
 */
class Photo implements UploadCollectionFileInterface
{

    /**
     * @var Proposal $proposal
     * @ORM\ManyToOne(targetEntity="Ip\ProposalBundle\Entity\Proposal", inversedBy="photos")
     * @ORM\JoinColumn(name="proposal_id", referencedColumnName="id")
     */
    protected $proposal;

    /**
     * @var integer
     *
     * @ORM\Column(name="id", type="integer")
     * @ORM\Id
     * @ORM\GeneratedValue(strategy="AUTO")
     */
    private $id;

    /**
     * @var string
     * @ORM\Column(name="legende", type="string", length=250, nullable=true)
     */
    private $legende;

    /**
     * @Vich\UploadableField(mapping="proposal_photo", fileNameProperty="path")
     */
    protected $file;

    /**
     * @var string
     * @ORM\Column(name="path", type="string", length=250, nullable=true)
     */
    private $path; 

    /**
     * @var integer
     * @ORM\Column(name="position", type="integer", nullable=true)
     */
    protected $position;

    /** 
     * @var \DateTime 
     * @ORM\Column(name="created_at", type="datetime", nullable=false) 
     */  
    protected $createdAt; 

    /** 
     * @var \DateTime 
     * @ORM\Column(name="updated_at", type="datetime", nullable=false) 
     */  
    protected $updatedAt; 

    public function __construct()
    {
        $this->createdAt = new \DateTime('now');         
        $this->updatedAt = new \DateTime('now');  
    }

    /**
     * Get id
     *
     * @return integer 
     */
    public function getId()
    {
        return $this->id;
    }

    /**
     * Set path
     *
     * @param string $path
     * @return Photo
     */
    public function setPath($path)
    {
        $this->path = $path;

        return $this;
    }

    /**
     * Get path
     *
     * @return string 
     */
    public function getPath()
    {
        return $this->path;
    }

    /**
     * Set createdAt
     *
     * @param \DateTime $createdAt
     * @return Photo
     */
    public function setCreatedAt($createdAt)
    {
        $this->createdAt = $createdAt;

        return $this;
    }

    /**
     * Get createdAt
     *
     * @return \DateTime 
     */
    public function getCreatedAt()
    {
        return $this->createdAt;
    }

    /**
     * Set updatedAt
     *
     * @param \DateTime $updatedAt
     * @return Photo
     */
    public function setUpdatedAt($updatedAt)
    {
        $this->updatedAt = $updatedAt;

        return $this;
    }

    /**
     * Get updatedAt
     *
     * @return \DateTime 
     */
    public function getUpdatedAt()
    {
        return $this->updatedAt;
    }

    /**
     * Set proposal
     *
     * @param \Ip\ProposalBundle\Entity\Proposal $proposal
     * @return Photo
     */
    public function setProposal(\Ip\ProposalBundle\Entity\Proposal $proposal = null)
    {
        $this->proposal = $proposal;

        return $this;
    }

    /**
     * Get proposal
     *
     * @return \Ip\ProposalBundle\Entity\Proposal 
     */
    public function getProposal()
    {
        return $this->proposal;
    }

    /**
     * Set position
     *
     * @param integer $position
     * @return Photo
     */
    public function setPosition($position)
    {
        $this->position = $position;

        return $this;
    }

    /**
     * Get position
     *
     * @return integer 
     */
    public function getPosition()
    {
        return $this->position;
    }

    public function setFile(\Symfony\Component\HttpFoundation\File\File $file) {
        $this->file = $file;
    }

    public function getFile() {
        return $this->file;
    }

    public function getSize() {
        return $this->file->getFileInfo()->getSize();
    }

    public function setParent($parent) {
        $this->setProposal($parent);
    }

    public function __toString(){
        return $this->path;
    }   

    /**
     * Set legende
     *
     * @param string $legende
     * @return Photo
     */
    public function setLegende($legende)
    {
        $this->legende = $legende;

        return $this;
    }

    /**
     * Get legende
     *
     * @return string 
     */
    public function getLegende()
    {
        return $this->legende;
    }

    public function getPreview() {
        return (preg_match('/image/.*/i', $this->file->getMimeType()));
    }

}

Thanks for your time and help :)

[rpostolov]

Please, i'm really stuck with this bug.

I think maybe it's a js probleme because wei still can see the browser button but i can't see why the js doesn't work. And i can't figure out why the thumbs don't appear when I select them.

Someone please ?

[bobvandevijver]

Can you check if there are any JS errors? Do you have the blueimp image upload JS files included? See here for the config (include_blueimp), but also check that it is really included/loaded.

When you've selected an image, are you abled to submit? Does it save the images correctly? If it does save, it is probably the missing JS. You could also look at the CSS of the page, it does look a little mangled.

You finally might want to try use the single upload widget first, to see if that works. I've never used the multiple upload widget myself.

[rpostolov]

Hi @bobvandevijver and thanks for helping me :)

When i upload a file now it's working, Everything is saved Thank to you ! But i still have the problem whit the thumb when i select the file. It does'nt appear. I have also a js errors... see bellow :

  <script type="text/javascript" src="/app_dev.php/assetic/js/compiled/admingenerator.min_bootstrap_1.js"></script>
            <script type="text/javascript" src="/app_dev.php/assetic/js/compiled/admingenerator.min_icheck_2.js"></script>
            <script type="text/javascript" src="/app_dev.php/assetic/js/compiled/admingenerator.min_jquery.slimscroll_3.js"></script>
            <script type="text/javascript" src="/app_dev.php/assetic/js/compiled/admingenerator.min_jquery.ba-resize_4.js"></script>
            <script type="text/javascript" src="/app_dev.php/assetic/js/compiled/admingenerator.min_jquery.treetable_5.js"></script>
            <script type="text/javascript" src="/app_dev.php/assetic/js/compiled/admingenerator.min_app_6.js"></script>
            <script type="text/javascript" src="/app_dev.php/assetic/js/compiled/admingenerator.min_main_7.js"></script>

            <script type="text/javascript" src="/app_dev.php/assetic/js/compiled/admingeneratorformextensions/form-extensions.min_bootstrap-collection_1.js"></script>
            <script type="text/javascript" src="/app_dev.php/assetic/js/compiled/admingeneratorformextensions/form-extensions.min_bootstrap-datetimepicker_2.js"></script>
            <script type="text/javascript" src="/app_dev.php/assetic/js/compiled/admingeneratorformextensions/form-extensions.min_daterangepicker_3.js"></script>
            <script type="text/javascript" src="/app_dev.php/assetic/js/compiled/admingeneratorformextensions/form-extensions.min_bootstrap-select_4.js"></script>
            <script type="text/javascript" src="/app_dev.php/assetic/js/compiled/admingeneratorformextensions/form-extensions.min_collection-upload_5.js"></script>
            <script type="text/javascript" src="/app_dev.php/assetic/js/compiled/admingeneratorformextensions/form-extensions.min_double-list_6.js"></script>
            <script type="text/javascript" src="/app_dev.php/assetic/js/compiled/admingeneratorformextensions/form-extensions.min_jquery.elastic_7.js"></script>
            <script type="text/javascript" src="/app_dev.php/assetic/js/compiled/admingeneratorformextensions/form-extensions.min_google-map_8.js"></script>
            <script type="text/javascript" src="/app_dev.php/assetic/js/compiled/admingeneratorformextensions/form-extensions.min_jquery.knob_9.js"></script>
            <script type="text/javascript" src="/app_dev.php/assetic/js/compiled/admingeneratorformextensions/form-extensions.min_jquery.minicolors_10.js"></script>
            <script type="text/javascript" src="/app_dev.php/assetic/js/compiled/admingeneratorformextensions/form-extensions.min_select2_11.js"></script>
            <script type="text/javascript" src="/app_dev.php/assetic/js/compiled/admingeneratorformextensions/form-extensions.min_single-upload_12.js"></script>

There are a lot of js that are not loaded and like moment.js, and other... I don't know why...

Here is my back office twig :

{% extends 'AdmingeneratorGeneratorBundle::base.html.twig' %}

{% block stylesheets %}
    {{ parent() }}

    {% include 'AdmingeneratorFormExtensionsBundle::stylesheets.html.twig' %}
    {% if form is defined and form is not empty %}
        {{ form_css(form) }}
    {% endif %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    {% include 'AdmingeneratorFormExtensionsBundle::javascripts.html.twig' %}
    {% if form is defined and form is not empty %}
        {{ form_js(form) }}
    {% endif %}
{% endblock %}

When i load the page i have those two js errors :

$.blueimap is undeffined
uncaught exception: bootstrap-datetimepicker requires Moment.js to be load first

When i select an image i have this js error :

JQuery.easing[this.easing] is not a function

Thank :)

[bobvandevijver]

It looks like you do not have jQuery included, and because of that everything else fails to load. Can you try to include jQuery in your head tag?

[rpostolov]

Hi @bobvandevijver !

Sorry for responding so late but i was trying and trying until i finally read carefuly the documentation you gave me and the comment put in the configuration. Which was saying that i just have tu set inclusion of js at true to let the bundle include those js for me...

###########################################################   
#Uploader
admingenerator_form_extensions:
    image_manipulator: liip_imagine
    upload_manager: vich_uploader
    twig:
      use_form_resources:     true
    collection_upload:
      async_listener_enabled: false
      async_route_name:       ~
      file_storage:           admingenerator.form.file_storage.local
     # you need these JS assets for some form types
     # if you set it to true, the bundle will include them for you
     # otherwise you have to do it manually
    include_jquery:           true
    include_jqueryui:         true
    include_momentjs:         true
    include_blueimp:          true 
    include_gmaps:            true

What a lost of time....

Thank you, you helped me a lot !!! :)