How to send Drozone.js data to Symfony server - php

Question

I'm using Dropzone.js to upload multiple files with a dropzone and an image preview, which works well, and this file field is part of a form with other fields from Symfony formBuilder.
What I would like now is to be able to send those file data to my Symfony server side.
I followed this tutorial, but the part where he gets the data returns null for me: $request->files->get('file') (of course by changing 'file' with 'product_form[distilleryPhotos][]' for me).
Moreover, my distilleryPhotos field from the builder isn't replaced by the Dropzone one. They seem to be two different fields on front side.
Here is my Controller function:
#[Route('/products/{id}', name: 'product_details', methods: ['GET', 'POST'])]
public function show(int $id, Request $request, TranslatorInterface $translator, SluggerInterface $slugger): Response
{
$repository = $this->getDoctrine()->getRepository(Product::class);
$product = $repository->findOneBy(['id' => $id]);
$form = $this->createForm(ProductFormType::class, $product, ['attr' =>
[
'class' => 'dropzone',
'id' => 'distillery-photos-dropzone'
]
]);
$form->handleRequest($request);
if ($form->isSubmitted() && $form->isValid())
{
$product->setName($form->get('name')->getData());
$product->setAge($form->get('age')->getData());
$distilleryPhotos = $form->get('distilleryPhotos')->getData();
if($distilleryPhotos)
{
$photos = [];
foreach($distilleryPhotos as $distilleryPhoto)
{
$originalFilename = pathinfo($distilleryPhoto->getClientOriginalName(), PATHINFO_FILENAME);
// this is needed to safely include the file name as part of the URL
$safeFilename = $slugger->slug($originalFilename);
$newFilename = $safeFilename.'-'.uniqid().'.'.$distilleryPhoto->guessExtension();
// Move the file to the directory where brochures are stored
try
{
$distilleryPhoto->move(
$this->getParameter('distillery_photos_directory'),
$newFilename
);
}
catch (FileException $e)
{
throwException($e);
}
$photos[] = $newFilename;
// updates the 'brochureFilename' property to store the PDF file name
// instead of its contents
}
$product->setDistilleryPhotos($photos);
}
$entityManager = $this->getDoctrine()->getManager();
$entityManager->persist($product);
$entityManager->flush();
$this->addFlash('success', $translator->trans('Your product was updated successfully.'));
return $this->redirectToRoute('product_details', [
'id' => $id,
]);
}
My twig:
<form name="product_form" method="post" class="dropzone" id="distillery-photos-dropzone" enctype="multipart/form-data" action="{{ path('product_details', {'id': product.id}) }}">
{{ form_end(productForm) }}
And my JS:
let fileUploadActionName = document.querySelector('#distillery-photos-dropzone').action;
let distilleryPhotosDropzone = new Dropzone(
"#distillery-photos-dropzone",
{
paramName: "product_form[distilleryPhotos][]",
maxFilesize: 10,
maxFile: 10,
addRemoveLinks: true,
uploadMultiple: true,
init: function () {
this.on("maxfilesexceeded", function(file) {
this.removeFile(file);
});
this.on("sending", function(file, xhr, formData) {
// send additional data with the file as POST data if needed.
// formData.append("key", "value");
});
this.on("success", function(file, response) {
if (response.uploaded)
alert('File Uploaded: ' + response.fileName);
});
}
}
);
distilleryPhotosDropzone.on("addedfile", file => {
console.log(`File added: ${file.name}`);
});

Answer 1

Might be useful for new visitors. You can use a library that extends Symfony Form and adds a new type DropzneType.
Example
public function buildForm(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
]);
}