SonataMediaBundle - how to upload images?

Question

Probably should be titled: "SonataMediaBundle - where's the missing howto?".

I've made some admin backend with sonataAdminBundle and sonataDoctrineORMAdminBundle (and some other), most of the things worked as expected, but I left file upload and handling for later, because I thought "how hard that possibly can be?".

To make long story short - is there ANY documentation about simplest of things - i.e. having images attached to a post or entry, how to configure sonata admin class, how to display image thumbs in edit form, etc.?

First page of documentation ends with "you can visit your admin dashboard" as if I could expect some relevant changes there, maybe media manager up and running, or something. But this is not the case.

Next page deals with heplers briefly, and then another page with fairly complicated vimeo provider case study.

I've searched all over the web and best I could come up with, was upload field with ajax popup, and list of uploaded files.

In my admin class I've got:

protected function configureFormFields(FormMapper $formMapper)
{
    $formMapper
    ->with('general')
        ->add('title')
        ->add('body')
        ->add('categories')
        ->end()
    ->with('media')
        ->add('images', 'sonata_type_model')

in my News class:

/**
 * @ORM\ManyToMany(targetEntity="Application\Sonata\MediaBundle\Entity\Media")
 */
public $images; 

and all the yaml configs and routings are implemented.

The result is: Fatal error: Call to a member function add() on a non-object in [some-entity].php when trying to upload an image, and selectable list of image id's with "plus" sign (sonata_type_model field I guess).

I'm stuck. I was able to create media "manager" just in plain sf2 in an hour or two, but it was another project and rewriting current one to this pattern means starting "from scratch". So - what to do in order to make sonataMediaBundle together with sonataAdminBundle work as expected?

---

EDIT: here's what I did instead:

My news class (or any other which needs image upload):

<?php

namespace Some\SiteBundle\Entity;

use Doctrine\ORM\Mapping as ORM;
use Doctrine\Common\Collections\ArrayCollection;
use Symfony\Component\Validator\Constraints as Assert;


/**
 * Some\SiteBundle\Entity\News
 *
 * @ORM\Table(name="news")
 */
class News
{
    /**
     * @var integer $id
     *
     * @ORM\Column(name="id", type="integer")
     * @ORM\Id
     * @ORM\GeneratedValue(strategy="AUTO")
     */
    protected $id;      


    //some stuff...

  /**
    * @var Document documents
     * @ORM\ManyToMany(targetEntity="Document", cascade={"persist", "remove", "delete"} )
     **/
    protected $documents;


    public function __construct()
  {
    $this->documents = new ArrayCollection();

  }

[...]

    /**
     * Add documents
     *
     * @param Festus\SiteBundle\Entity\Document $documents
     */
    public function addDocument(\Festus\SiteBundle\Entity\Document $document)
    {
        $this->documents[] = $document;
    }

    /**
     * set document
     *
     * @param Festus\SiteBundle\Entity\Document $documents
     */
    public function setDocument(\Festus\SiteBundle\Entity\Document $document)
    {
        foreach ($this->documents as $doc) {
            $this->documents->removeElement($doc);
        }
        $this->documents[] = $document;
    }

    /**
     * Get documents
     *
     * @return Doctrine\Common\Collections\Collection 
     */
    public function getDocuments()
    {
        return $this->documents;
    }



    // setters, getters...

My document class (needed to change the name of the table, because I ran into issues with reserved words on some servers):

<?php  

namespace Some\SiteBundle\Entity;

use Doctrine\ORM\Mapping as ORM;
use Doctrine\Common\Collections\ArrayCollection;
use Symfony\Component\Validator\Constraints as Assert;

/**
 * Some\SiteBundle\Entity\Document
 *
 * @ORM\Table(name="docs")
 * @ORM\Entity
 * @ORM\HasLifecycleCallbacks
 */
class Document
{
    /**
     * @ORM\Id
     * @ORM\Column(type="integer")
     * @ORM\GeneratedValue(strategy="AUTO")
     */
    private $id;

    /**
     * @ORM\Column(type="string", length=255)
     * @Assert\NotBlank
     */
    private $name;

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

    /**
     * @Assert\File(maxSize="6000000")
     */
    private $theFile;


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


    /**
     * @ORM\Column(type="integer")
     */
    private $type = 1;


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

    public function getAbsolutePath()
    {
        return null === $this->path ? null : $this->getUploadRootDir().'/'.$this->path;
    }

    public function getWebPath()
    {
        return null === $this->path ? null : $this->getUploadDir().'/'.$this->path;
    }

    protected function getUploadRootDir()
    {
        // the absolute directory path where uploaded documents should be saved
        return __DIR__.'/../../../../web/'.$this->getUploadDir();
    }

    protected function getUploadDir()
    {
        // get rid of the __DIR__ so it doesn't screw when displaying uploaded doc/image in the view.
        return 'uploads/documents';
    }   

    /**
     * @ORM\PrePersist()
     * @ORM\PreUpdate()
     */
    public function preUpload()
    {
        if (null !== $this->theFile) {
            //var_dump($this);
            // do whatever you want to generate a unique name
            $this->path = uniqid().'.'.$this->theFile->guessExtension();
        }
    }

    /**
     * @ORM\PostPersist()
     * @ORM\PostUpdate()
     */
    public function upload()
    {
        if (null === $this->theFile) {
            return;
        }

        // if there is an error when moving the file, an exception will
        // be automatically thrown by move(). This will properly prevent
        // the entity from being persisted to the database on error
        $this->theFile->move($this->getUploadRootDir(), $this->path);

        unset($this->theFile);
    }

    /**
     * @ORM\PostRemove()
     */
    public function removeUpload()
    {
        if ($file = $this->getAbsolutePath()) {
            unlink($file);
        }
    }

    public function __toString()
      {
        return 'Document';
      }


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

    /**
     * Set name
     *
     * @param string $name
     */
    public function setName($name)
    {
        $this->name = $name;
    }

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

    /**
     * Set file
     *
     * @param string $file
     */
    public function setTheFile($file)
    {
        $this->theFile = $file;
    }

        /**
     * Get file
     *
     * @return string 
     */
    public function getTheFile()
    {
        return $this->theFile;
    }

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

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


    /**
     * Set type
     *
     * @param string $type
     */
    public function setType($type)
    {
        $this->type = $type;
    }

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


    /**
     * Gets an object representing the date and time the user was created.
     * 
     * @return DateTime A DateTime object
     */
    public function getCreatedAt()
    {
        return $this->createdAt;
    }


     /**
     * Gets an object representing the date and time the user was created.
     * 
     * @return DateTime A DateTime object
     */
    public function getCreatedAtString()
    {
        return date_format($this->createdAt, "Y-m-d");
    }


    /**
     * Set createdAt
     *
     * @param datetime $createdAt
     */
    public function setCreatedAt($createdAt)
    {
        $this->createdAt = $createdAt;
    }


}

As You can see, most of it is copied from symfony2 tutorial.

Now, for the controller:

<?php 

namespace Some\SiteBundle;

use Some\SiteBundle\Form\Type\ImageShowType;
use Some\SiteBundle\Entity\Document;
use Sonata\AdminBundle\Admin\Admin;
use Sonata\AdminBundle\Datagrid\ListMapper;
use Sonata\AdminBundle\Datagrid\DatagridMapper;
use Sonata\AdminBundle\Validator\ErrorElement;
use Sonata\AdminBundle\Form\FormMapper;
use Sonata\AdminBundle\Show\ShowMapper;
use Symfony\Component\HttpFoundation\File\File;
use Symfony\Component\HttpFoundation\Request;


class NewsAdmin extends Admin
{

    public function __construct($code, $class, $baseControllerName) {
        parent::__construct($code, $class, $baseControllerName);

        $this->setFormTheme(array_merge($this->getFormTheme(),
            array('FestusSiteBundle:Form:image_form.html.twig')
        ));
    }


    protected function configureFormFields(FormMapper $formMapper)
    {
        $formMapper
        ->with('ogólne')
            ->add('title', NULL, array('label' => 'tytuł:'))
                ->add('body', NULL, array('label' => 'treść:', 'attr' => array(
                    'class' => 'tinymce', 'data-theme' => 'simple')))
                ->add('categories', NULL, array('label' => 'kategorie:'))
        ->end()
        ->with('media')
            ->add('fileName', 'text', array(
                    "label" => 'tytuł obrazka:',
                    'property_path' => false,
                        'required' => false
                ))
            ->add('theFile', 'file', array(
                    "label" => 'wybierz plik',
                    'property_path' => false,
                        'required' => false
                ))
            ->end()
        ;
    }

    protected function configureDatagridFilters(DatagridMapper $datagridMapper)
    {
        $datagridMapper
            ->add('title')
            ->add('body')
        ;
    }

    protected function configureListFields(ListMapper $listMapper)
    {
        $listMapper
            ->addIdentifier('title')
            ->add('categories')

            ->add('_action', 'actions', array(
                'actions' => array(
                    'view' => array(),
                    'edit' => array(),
                )
            ))
        ;
    }

    protected function configureShowFields(ShowMapper $showMapper)
    {
        $showMapper->add('title')
            ->add('body');

    }

    public function validate(ErrorElement $errorElement, $object)
    {
        $errorElement
            ->with('title')
                ->assertMinLength(array('limit' => 2))
            ->end()
        ;
    }

    public function prePersist($news) {
        $this->saveFile($news);
      }

      public function preUpdate($news) {
        $this->saveFile($news);
      }

      public function saveFile($news) {
        $request = Request::createFromGlobals();
        $requestData = current($request->request->all());
        $filesData = current($request->files->all());
        $document = new Document();
        $theFile = $filesData['theFile'];
        $name = $requestData['fileName'];

        if($theFile != NULL){
            $document->setName($name);
            $document->setTheFile($theFile);
            $news->setDocument($document);
        }
      }
}

My base bundle class extends admin bundle class, co I could overwrite templates:

<?php

namespace Some\SiteBundle;

use Symfony\Component\HttpKernel\Bundle\Bundle;

class SomeSiteBundle extends Bundle
{

    public function getParent()
    {
        return 'SonataAdminBundle';
    }

}

And in SomeSiteBundle/resources/views/CRUD/base_edit.html.twig I've changed template a little bit to let user see currently set picture:

<div class="sonata-ba-collapsed-fields">                    
                    {% for field_name in form_group.fields %}
                        {% if admin.formfielddescriptions[field_name] is defined %}
                            {% if field_name == 'fileName' %}

                            <h5 style="margin-left: 40px">Obecny obrazek:</h5>
                            {% if object.documents[0] is defined %}
                                <img style="margin: 0 0 0 40px; border: 1px dotted #ccc" src="{{ asset(object.documents[0].webPath) }}" />
                                {% else %}
                                <div style="margin-left: 40px">brak</div>
                                {% endif %}
                                <hr><h5 style="margin-left: 40px">Wczytaj nowy:</h5>
                            {% endif %}
                            {{ form_row(form[field_name])}}
                        {% endif %}
                    {% endfor %}
                </div>

Right now I'm using only one picture per news ("featured picture") and it's a bit overkill anyway, because I'm using tinyMCE with jbimages plugin, so I can put images into news body anyway. To make jbimages plugin work right You've got to set some tinyMCE options though:

------ this part deals with tinymce and tinymce bundle and tinymce plugin: ---------

$config['img_path'] = '/web/uploads/documents'; (or any other path that suits You) in web/bundles/stfalcontinymce/vendor/tiny_mce/plugins/jbimages/config.php. (You need to install stfalcon tinymce bundle first, of course). Then I edited a bit web/bundles/stfalcontinymce/js/init.jquery.js to allow more options from config.yml to be read:

themeOptions.script_url = options.jquery_script_url;
            //mine:
            themeOptions.convert_urls = options.convert_urls;
            themeOptions.relative_urls = options.relative_urls;
            themeOptions.remove_script_host = options.remove_script_host;
            themeOptions.document_base_url = options.document_base_url;

And finally in config.yml:

[...]
stfalcon_tinymce:
    include_jquery: true
    tinymce_jquery: true
    textarea_class: "tinymce"
    relative_urls : false
    convert_urls : false
    remove_script_host : false
    document_base_url : "http://somesite.home.pl/web/"
    theme:
[...]

And that's all, AFAIR. Hope this helps ;-)

Answer 1

Maybe you can find the answer to your question in the: /admin/sonata/media/media/create?provider=sonata.media.provider.image&context=default

I am interested to your other solution, please post code. Thanks