Using unquoted json formatted result set in symfony2 twig

In the request->process->response world of the MVC infrastructure, Symfony2 fits just perfect.

I was working on some data intensive site. All I want was to get the set of records from the mysql database and pass it to the front end through the controller. The front end wants the JSON format of the result set. The front end is getting the polished output of the twig

The problem
Front-end is not happy since it is getting quote-escaped version of JSON

The solution

Very very very simple. Rather than passing the json_encode(all_cars), where all_cars being the array of results coming from database or whatever it is, just pass the array it self

{{ all_cars | json_encode | raw }}

Yup, twig will not try to escape the quotes in this case since it is told to present raw.

Additional View

As you can see in this menu, both JSON and html views are together as combo. From design point of view this is not a good approach.

Better approach

You can bake the whole view right in the view and you might not want additional javascript logic on your view

OR
Have specific API to return 100% JSON response for the request like

some domain dot com/all/cars

By hitting this from, say your ajax call, you will be provided with json formatted list of all cars.

Since you are calling it from javascript, it will be directly coming to its home and no funny business would be there.
Then you will have another url call to load the page say:

some domain dot com/cars

where it will simply load the bare html format to the front-end and the front-end will know what to do with it.

Of course, this would have two trips and even more so it would be suitable for 80-90% of ajaxy sites..

EnJoY!

Vagrant running slow sites

Using vagrant and running a website from it looks so slow when you access it form host?
Then you are not alone.
Just enable NFS and you would see an increase on performance.

If you are using puphpet, on your config.yaml file under the synced_folder, set nfs to ‘true’. Otherwise on your Vagrantfile, look for nfs and set that to true.

file upload

multiple file upload in Symfony2 example

Multiple File Upload in Symfony framework

I spent decent amount of time to put together the multiple file upload in symfony.

It is not that difficult actually but the problem is there is no direct/easy documentation or tutorial on it.

On the form type where you would build the form, have the files with the type of collection and make its type a file entity. In this case there would be two file types by default.

    public function buildForm(FormBuilderInterface $builder, array $options) 
    {
        /*
         * The file does not need to be added as "file" because it is referred
         * in the validation for File and SF will automatically know it is file.
         */
        return $builder
                ->add("files", 'collection', array(
		    'type'=>new FileType(),
		    'allow_add'=>true,
		    'data'=>array(new BundleEntityFile(),
		    new BundleEntityFile())
		))
                ->add('save', 'submit');
    }

    public function getName()
    {
        return "files";
    }
}

The trick is on adding the files as collection. Initially, we have two file inputs and their type being FileType.

The allow_add is important to be able to add files through javascript.

The javascript would look like:

/*Handling multiple picture upload*/
$('#add_pictures').click(function(){
    var total_files=$("#member_pictures_container li").length;
    var file_label=document.createElement("label");
    file_label.innerHTML="File";
    file_label.for="PhotoAndDescription_files_"+total_files;
    var div_file=document.createElement("div");    
    div_file.appendChild(file_label);
    var picture= document.createElement('input');
    picture.name="PhotoAndDescription[files]["+total_files+"][file]";
    picture.type="file";
    picture.id="PhotoAndDescripton_files_"+total_files;
    div_file.appendChild(picture);
    div_container=document.createElement('div');
    div_container.id="PhotoAndDescription_files_"+total_files;
    div_container.appendChild(div_file);
    var list_element=document.createElement('li');
    list_element.appendChild(div_container);
    $('#member_pictures_container').append(list_element);
});

FileType would look like:

class FileType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        return $builder->add("file", "file");
    }

    public function getName()
    {
        return "filetype";
    }

    public function setDefaultOptions(OptionsResolverInterface $resolver)
    {
        $resolver->setDefaults(array(
            'data_class'=>'BundleEntityFile',
            'csrf_protection'=>true,
            'csrf_field_name'=>'_token',
            'intention'=>'file'
        ));
    }
}

 

And the twig file would look like this one

{{form_start(form)}}
    {{ form_errors(form) }}
    {{ form_widget(form.about_member) }}
    • {% for file in form.files %}

 

  • {{ form_errors(file) }} {{ form_widget(file) }}

 

 

{% endfor %} {{form_end(form)}}

Pretty much this will take care of the multiple file handling in symfony2. As I mentioned earlier, it is not that difficult but the lack of documentation has made it so..

Do you know what to check to deploy Symfony app?

What is POST and HTTP-RAW-POST and php input has to do with enctype? Find out here