Gullele's Corner

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