Bonjour,
Voila je rencontre un petit problème avec dropzone et le bind du formulaire avec les fichier uploader en ajax ne fonctionne pas correctement.
Ce que je veux
J'ai une class Unit (appartement) => oneToMany <= Media (image). Si je créer un MediaType puis utilise une collection de se formulaire cela fonctionne. Ce que je souhaite c'est d'utiliser l'upload avec Dropzone.js sans ajax et à uploader, créer une collection de Media en ajax. Cela me permet d'empêcher des utilisateurs de commencer à créer une Unité avec des images et d'un coup annule (se qui ferais des medias uploader pour rien).
J'ai donc chercher un moyen d'envoyer l'upload de dropzone en même temps que le post et non en asynchrone pour créer une collection de Media et uploader les images
Ce que je fais
J'utilise un type de champ Hidden pour le DropZone pour qu'une fois qe cela fonctionne je puisse réordonnée les images. Mais avant cette étape j'ai modifier le paramName de dropZone pour qu'il corresponde à la même donnée que si j'utilisait une collection de MediaType ce qui donne "unit[unitMedias][0][file]".
Ceci "unit[unitMedias][0][file]" fonctionne avec MediaType mais pas DropZoneType.
<?php
class UnitType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
// autre champs .....
/****
* Utilisation avec Une collection de type MediaType (fonctionnel en POST)
*****/
// ->add('unitMedias', BootstrapCollectionType::class,array(
// 'entry_type' => MediaType::class,
// 'allow_add' => true,
// 'allow_delete' => true,
// 'prototype' => true,
// ))
/****
* Utilisation avec DropZoneType (POST en ajax)
*****/
->add('unitMedias', DropZoneType::class, array(
'uploadPath' => $options['action'],
))
;
}
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefaults([
'data_class' => Unit::class,
]);
}
}
class MediaType extends AbstractType
{
/**
* {@inheritdoc}
*/
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('file', FileType::class, array(
'media_path' => 'path',
'media_name' => 'name'
))
;
}
/**
* {@inheritdoc}
*/
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefaults(array(
'data_class' => 'App\Bundles\MediaBundle\Entity\Media',
'media_path' => 'path',
'media_name' => 'name'
));
}
/**
* {@inheritdoc}
*/
public function getName()
{
return $this->getBlockPrefix();
}
/**
* {@inheritdoc}
*/
public function getBlockPrefix()
{
return 'plogg_mediatype';
}
}
<?php
class DropZoneType extends AbstractType
{
private $configurations;
public function __construct(MediaRepository $mediaRepository)
{
$this->configurations = array(
'acceptedFiles' => null,
'maxFilesize' => 10,
'directory' => '',
'uploadPath' => ''
);
}
/**
* {@inheritdoc}
*/
public function buildView(FormView $view, FormInterface $form, array $options)
{
$this->configurations = array_merge($this->configurations, $options);
$view->vars = array_merge(
$view->vars,
array(
"acceptedFiles" => $this->configurations['acceptedFiles'],
"maxFilesize" => $this->configurations['maxFilesize'],
"directory" => $this->configurations['directory'],
"uploadPath" => $this->configurations['uploadPath']
)
);
}
/**
* {@inheritdoc}
*/
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefaults(array(
'maxFilesize' => 10,
'directory' => '',
'acceptedFiles' => null,
'uploadPath' => null,
'required' => false,
'validation_groups' => false,
));
}
public function getParent()
{
return HiddenType::class;
}
/**
* {@inheritdoc}
*/
public function getName()
{
return $this->getBlockPrefix();
}
/**
* {@inheritdoc}
*/
public function getBlockPrefix()
{
return 'dropzoneType';
}
}
{% block plogg_dropzoneType_widget %}
{% spaceless %}
<div class="mediaBundle-area-{{ id }}" {{ block('widget_attributes') }} >
<input type="hidden" {{ block('widget_attributes') }} class="mediaBundle-area-field" value="{{ value }}" />
<div class="dropzone-container">
<div class="dropzonez dropzone"></div>
</div>
</div>
<script>
$(function(){
function serializeArrayForm($form){
var result = { };
if (window.CKEDITOR) {
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].updateElement();
}
}
$.each($form.serializeArray(), function() {
result[this.name] = this.value;
});
return result;
}
var $form = $('form[name="{{ form.parent.vars.name }}"');
Dropzone.autoDiscover = false;
var dropzone_default = new Dropzone(".dropzone", {
url: "{{ uploadPath }}",
maxFiles: 100,
autoProcessQueue: false,
uploadMultiple: true,
dictMaxFilesExceeded: 'Only 1 Image can be uploaded',
acceptedFiles: 'image/*',
maxFilesize: 100, // in Mb
addRemoveLinks: true,
paramName: function(n){
return '{{ full_name }}['+n+'][file]';
},
init: function () {
var dropZonePrincipal = this;
this.on("maxfilesexceeded", function(file) {
dropZonePrincipal.removeFile(file);
});
this.on("sending", function(file, xhr, formData) {
// send additional data with the file as POST data if needed.
var formArray = serializeArrayForm($form);
for (var field in formArray){
formData.append(field, formArray[field]);
}
});
this.on("sendingmultiple", function(file, xhr, formData) {
var formArray = serializeArrayForm($form);
for (var field in formArray){
formData.append(field, formArray[field]);
}
});
$("#btn-save").click(function (e) {
var total_pictures_upload = dropZonePrincipal.getQueuedFiles().length;
if (total_pictures_upload > 0) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
dropZonePrincipal.processQueue();
}else{
e.preventDefault();
e.stopPropagation();
var data = {};
data = serializeArrayForm($form);
console.log(data);
$.post( $form.attr('action'), data ,function( result ) {
});
}
});
}
});
});
</script>
{% endspaceless %}
{% endblock %}
<?php
/*
* Action du controller
*/
public function new(Request $request)
{
$unit = new Unit();
$form = $this->createUnitForm($unit);
if($request->isXmlHttpRequest()) {
// tentative d'utilisation de la fonction submit (echec)
// $form->submit($request);
$form->handleRequest($request);
dump($request);
dump($form->getData());
die();
if ($form->isValid()) {
$em = $this->getDoctrine()->getManager();
$em->persist($unit);
$em->flush();
return new JsonResponse(array('success'=> true, 'files' => $request->files));
}else{
die((string)$form->getErrors());
}
}else{
$form->handleRequest($request);
if ($form->isSubmitted() && $form->isValid()) {
$em = $this->getDoctrine()->getManager();
$em->persist($unit);
$em->flush();
return $this->redirectToRoute('admin_unit_index');
}
return $this->render('admin/unit/new.html.twig', [
'unit' => $unit,
'form' => $form->createView(),
]);
}
}
Mais avec l'ajax la fonction handleRequest() ne créer pas mon Entity Media. Je vous met une image qui montre la requête et le résultat après handleRequest() ainsi que les deux façons.
Ce que j'obtiens
Comme vous pouvez voir sur se lien https://ibb.co/ccbhoy (désoler je n'est pas réussi à uploader l'image dans l'éditeur)
Les deux images en haut sont le dump de la request au niveaux de $_FILE et les deux images en dessous sont les donnée dans le formulaire une fois la fonction handleRequest() faite.
On peut voir que avec le type MediaType cela fonctionne car j'ai un array de Media mais pas avec DropzoneType ou j'ai un array mais de UploadedFile.
Quelqu'un aurais une idée de pourquoi la fonction handleRequest de se comporte pas pareil en ajax ou non?
Je vous remercie d'avance de votre aide