page gestion upload images
Bonjour,
j'essaye de développer une page sur laquelle se trouve la possibilité d'uploader un nombre indéfini (que je définirais plus tard en fait) de photo.
Ces photos sont donc définies en tant qu'entité et liées à des entités "bien immobilier". C'est une relation One(bien)ToMany(photo) avec une relation bidirectionnelle.
Afin d'ajouter un nouveau bien, j'ai un formulaire pour ceux-ci ainsi qu'un formualire imbiqués pour les photo, soit photoType imbriqué dans bienType. L'imbrication est sous la forme d'un type "collection" définie comme cela:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//bienType.php
$builder->....
->add('photos', 'collection', array(
'type' => new PhotoType(),
'allow_add' => true,
'allow_delete' => true,
'prototype' => true,
'by_reference' => false
));
//photoType.php
$builder->add('file', 'file', array('label'=>false,
'attr'=>array('class'=>'input_add_photo')))
; |
Je vous passe les détails des entity et des formType car tout ça marche très bien, l'insertion d'un nouveau bien se fait nickel ainsi que les photos correspondantes.
Le problème est le suivant:
Sur ma page d'upload des photos, j'ai donc fait en sorte que l'on puisse uploader plusieurs photos, pas avec un input file multiple mais avec un lien "ajouter une photo" qui affiche un nouveau champ input file pour chaque nouvelle photo, avec un lien pour le supprimer si besoin. Un bouton "envoi" enverra ensuite toutes les photos en même temps.
Cela marche très bien également, les lien "ajouter une photo" et "supprimer" font bien apparaitre ou disparaitre un champ file input. La soumission du formulaire marche bien, le bien et ses photos sont bien ajoutés dans ma bdd
Le souci c'est que j'essaye de faire apparaitre en preview chaque photo que l'on veut envoyer mais avant l'upload dans un canvas en dessous du champ input file correspondant.
Et là ça ne fontionne que pour la première image, pas pour les autres.
Voila ma vue:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
<div class="field-head">AJOUTER DES PHOTOS</div>
<form action="{{ path('bien_ajout') }}" method="post" {{ form_enctype(form) }} id="form_photos">
{{form_widget(form.photos)}} <input type="submit" class="bt btn-add" />
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
var $container = $('#monbundle_bien_photos');
var $lienAjout = $('<a href="#" id="ajout_photo" class="btn">Ajouter une photo</a>');
$container.append($lienAjout);
$lienAjout.click(function(e){
ajouterPhoto($container);
e.preventDefault;
return false;
});
var index = $container.find(':input').length;
if (index == 0){
ajouterPhoto($container);
}else{
$container.children('div').each(function() {
ajouterLienSuppression($(this));
});
}
function ajouterPhoto($container) {
var $prototype = $($container.attr('data-prototype').replace(/__name__label__/g, 'Photo' + (index+1)).replace(/__name__/g, index));
ajouterLienSuppression($prototype);
$container.append($prototype);
index++;
}
function ajouterLienSuppression($prototype) {
$lienSuppression = $('<a href="#" class="btn-btndanger">Supprimer</a>');
$prototype.append($lienSuppression);
$lienSuppression.click(function(e) {
$prototype.remove();
e.preventDefault();
return false;
});
}
$('#form_photos input[type="file"]').change(function() {
alert('test');
});
});
</script> |
Je vous passe volontairement mon code de prévisulation des photos car le problème est simplifiable au fait que l'evenement "change" sur les input file ne fonctionne que pour le premier , pas sur les autres.
En gros par rapport à mon code ci-dessus, lorsque j'ai fait plusieurs fois "ajouter une photo", le message 'test' (et donc ensuite la prévisualisation de la photo correspondante) ne marchera que sur le premier champ input file, pas sur les suivants.
Je sais pas si je suis très clair mais pour ceux qui ont réussi à suivre merci d'avance pour votre aide!!
