Multi upload Symfony 2.3 with Dropzone

Question

I tried a new implementation of JQuery library : dropzone.js

This library provides a good multi upload interface with drag and drop solution.

It seems that t

Answer 1

Symfony requires that every form contains a csrf-token. Your form doesn't contain one so symfony tries to use your "file"-field as a csrf-token and throws the error. The first step to solve this problem is to render a csrf-token with this snippet in your form-element:

{{ form_widget(form) }}

Then you have to change your entity that it can handle multiple files. This can be done by implementing a one to many relation (upload (one) to file (many)).

Answer 2

In Symfony if you have error

Error: Call to a member function move() on a non-object

Try change

$files = $request->files

To

$files = $request->files->get('file');

Answer 3

First of all, you don't really use your FileUploadType in the Twig template. You create a form manually and set the action path to the url you defined in your Controller. The only thing you use from the form view you pass to the template is the form_enctype. But like most multi file uploaders, Dropzone seems to forge its own request to upload an Image.

This means you also have to handle the incoming data manually.

/**
 * @Route("/admin/media/upload")
 * @Template()
 */
public function showUploadAction()
{
    // just show the template
    return [];
}

/**
 * @Route("/admin/media/upload/process", name="upload_media")
 */
public function uploadAction()
{
    $request = $this->get('request');
    $files = $request->files;

    // configuration values
    $directory = //...

    // $file will be an instance of Symfony\Component\HttpFoundation\File\UploadedFile
    foreach ($files as $uploadedFile) {
        // name the resulting file
        $name = //...
        $file = $uploadedFile->move($directory, $name);

        // do something with the actual file
        $this->doSomething($file);
    }

    // return data to the frontend
    return new JsonResponse([]);
}

The method uploadAction takes the FileBag from Symfony's request, iterates over it, and performs your custom logic on the resulting file. Of course you have to handle the storage of the File entity by yourself.

Your template should look like this:

<form action="{{ path('upload_media') }}" method="post" class="dropzone">
    <div class="fallback">
        <input name="file" type="file" multiple />
    </div>
</form>

---

Thanks to this question I took notice of the Dropzone uploader and integrated support for it in the OneupUploaderBundle. So you could just use this bundle which simplifies a few steps mentioned above.