symfonydropzone.jsvichuploaderbundleoneupuploaderbundle

Syfmony: upload files with dropzone

I'm developing a king of simple CMS, with Symfony 4.1.

Regarding my question, we have 2 entities:

So for adding a Post, I have a PostType:

<?php

namespace App\Form;

use App\Entity\Category;
use App\Entity\Post;
use FOS\CKEditorBundle\Form\Type\CKEditorType;
use Symfony\Bridge\Doctrine\Form\Type\EntityType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\FileType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

/**
 * Class PostType
 * @package App\Form
 */
class PostType extends AbstractType
{
    /**
     * @param FormBuilderInterface $builder
     * @param array $options
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('name')
            ->add('content', CKEditorType::class)
            ->add('categories', EntityType::class,
                [
                    'class'        => Category::class,
                    'required'     => true,
                    'choice_label' => 'name',
                    'multiple'     => true,
                ]
            )
            ->add('pictureFiles', FileType::class,
                [
                    'required' => false,
                    'multiple' => true,
                    'label'    => 'Add files...',
                    'attr' =>
                        [
                            'action' => '%kernel.project_dir%/public/media/posts'
                        ]
                ]
            )
            ->add('status')
        ;
    }

    /**
     * @param OptionsResolver $resolver
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => Post::class,
        ]);
    }
}

The view corresponding to that form:

{% form_theme form '/admin/form/switch_btn_layout.html.twig' %}

{{ form_start(form) }}

    {{ form_errors(form) }}

    <div class="form-row">

        <div class="col-md-6">
            {{ form_row(form.name) }}
            {{ form_row(form.categories) }}
            {{ form_row(form.status) }}
        </div>

        <div class="col-md-6 dropzone" id="postDropzone">
            {{ form_row(form.pictureFiles, {'attr': {'class': 'dropzone'}} ) }}

            <div class="dropzone-previews" style="border: 1px solid red"></div>
        </div>
    </div>

    <div class="form-group">
        {{ form_row(form.content) }}
    </div>

    <div class="form-group">
        {{ form_row(form.status) }}
    </div>

    {{ form_rest(form) }}

    <button class="btn btn-success btn-lg btn-block" id="postSubmit">
        {{ button_label|default('Save') }}
    </button>

{{ form_end(form) }}

As you can see, the "input" for files as the dropzone css class. Indeed, my project include the oneup_uploader bundle, for dropzone.

Here the configuration for oneup_uploader:

oneup_uploader:
    mappings:
        # This is a mapping example, remove it and create your own mappings.
        post_image:
            frontend: dropzone
            namer: oneup_uploader.namer.uniqid
            storage:
                directory: '%kernel.project_dir%/public/media/posts'

And my script for Dropzone:

Dropzone.autoDiscover = false;

var postDropzone = new Dropzone('.dropzone', {

    url: '%kernel.project_dir%/public/media/posts',
    // url: 'file/post',
    maxFiles: 10,
    addRemoveLinks: true,
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,

});

postDropzone.on("addedfile", function (file) {

    file.previewElement.addEventListener("click", function () {
        postDropzone.removeFile(file);
    })
});

The issue for me is:

I also tried to not use OneUploaderBundle, and use VichUploader: the saving part in DB is perfect, but I can't link it to dropzone.

Some help guys ? Thanks a lot !

Solution

  • Might be useful for new visitors. You can use a library that extends Symfony Form and adds a new type DropzneType.

    1.Install the library

    composer require emrdev/symfony-dropzone

    This way you will have a new form type DropzoneType

    2.Use the type in your form like this

    public function buildForm(\Symfony\Component\Form\FormBuilderInterface $builder, array $options)
{ 

    // userFiles is OneToMany
    $builder->add('userFiles', DropzoneType::class, [
        'class' => File::class,
        'maxFiles' => 6,
        'uploadHandler'=>'uploadHandler',  // route name
        'removeHandler'=> 'removeHandler'// route name
   ]);
}

    Change the uploadHandler and removeHandler options to your endpoints

    3.Route uploadHandler/removeHandler might look something like this

    /**
 * @Route("/uploadhandler", name="uploadHandler")
 */
public function uploadhandler(Request $request, ImageUploader $uploader) { 
    $doc = $uploader->upload($request->files->get('file'));  
    $file = new File(); 
    $file->setSrc($doc['src']);
    ...

    $this->getDoctrine()->getManager()->persist($file);
    $this->getDoctrine()->getManager()->flush();
    return new JsonResponse($file);
}


/**
 * @Route("/removeHandler/{id}", name="removeHandler")
 */
public function removeHandler(Request $request,File $file = null) {
    $this->getDoctrine()->getManager()->remove($file);
    $this->getDoctrine()->getManager()->flush();
    return new JsonResponse(true);
}

    note that uploadhandler should return a File object