appsco/pan-crop-bundle

PanCropBundle

Bundle with form type for uploading cropped image. Based on https://github.com/igorpan/pan-crop, _(*1)

Usage

Blob object ``` php <?php, _(*2)

namespace AcmeBundle\Model;, _(*3)

class Blob { /** @var int */ protected $id;, _(*4)

/** @var string */
protected $title;

/** @var int */
protected $size;

/** @var string */
protected $contentType;

/** @var resource */
protected $content;

}, _(*5)

Entity with reference to Blob object
``` php
<?php

namespace AcmeBundle\Model;

class User
{
    /** @var string */
    protected $email;

    /** @var Blob|null */
    protected $picture;

    /** @var string|null */
    protected $pictureUrl;
}

Form type, _(*6)

``` php <?php, <sub>(*7)</sub>

namespace AcmeBundle\Form\Type;, <sub>(*8)</sub>

use Symfony\Component\Form\AbstractType; use Symfony\Component\Form\FormBuilderInterface; use Symfony\Component\OptionsResolver\OptionsResolverInterface;, <sub>(*9)</sub>

class ProfileType extends AbstractType { /** * @param FormBuilderInterface $builder * @param array $options */ public function buildForm(FormBuilderInterface $builder, array $options) { // PROFILE $builder ->add('email', 'email') ->add('picture_blob', 'pan_crop', array( 'required' => false, 'data_class' => 'AcmeBundle\Model\Blob', 'data_mapping' => 'content', 'mime_mapping' => 'contentType', 'size_mapping' => 'size', 'name_mapping' => 'title', )) ->add('save', 'submit', array( 'label' => 'Save' )) ; }, <sub>(*10)</sub>

public function setDefaultOptions(OptionsResolverInterface $resolver)
{
    $resolver->setDefaults(array(
        'data_class' => 'AcmeBundle\Model\User',
    ));
}


/**
 * Returns the name of this type.
 * @return string The name of this type
 */
public function getName()
{
    return 'profile';
}

}, <sub>(*11)</sub>

Controller
``` php
<?php

namespace AcmeBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;

class DefaultController extends Controller
{
    public function indexAction($userId, Request $request)
    {
        $user = $this->loadUser($userId);
        $form = $this->createForm('profile', $user);
        $form->handleRequest($request);
        if ($form->isValid()) {
            if ($blob = $user->getPicture()) {
                if ($blob->getContent()) {
                    $this->savePicture($blob);
                }
                if ($blob->getId()) {
                    $user->setPictureUrl(
                        $this->router->generate(
                            'picture_path',
                            array('blobId' => $blob->getId()),
                            UrlGeneratorInterface::ABSOLUTE_URL
                        )
                    );
                }
            }
            $this->saveUser($user);
        }

        return $this->render('@Acme/Default/index.html.twig', array(
            'user' => $user,
            'form' => $form->createView(),
        ));
    }
}

View, <sub>(*12)</sub>

``` twig {% extends '::base.html.twig' %}, <sub>(*13)</sub>

{% block body %}, <sub>(*14)</sub>

{{ form(form) }}

{% endblock %}, <sub>(*15)</sub>

{% block javascripts %} {{ parent() }} {% javascripts '@AppscoPanCropBundle/Resources/public/js/jquery.pan-crop.min.js' %} {% endjavascripts %}, <sub>(*16)</sub>

<script type="text/javascript">
    $('#profile_picture_file').panCropUi({
        $previewBox: $('#img-preview-container'), // the preview pane used for cropping
        submitCropData: '#profile_picture_crop_data' // matches the hidden field corresponded with the file input
    });
</script>

{% endblock %}, <sub>(*17)</sub>

```, <sub>(*18)</sub>