Discussion :

[swingstar]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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!!

[dukoid]

c'est un problème récurrent le multi upload.

l'input doit être de cette forme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<input name = "photo[]" type = "file" />

il existe des bundles qui permet le multi upload de photos pratique.

[swingstar]

Si je me contente de rajouter des input file dans ma vue en html, sans leur donner d'id ou de name, simplement <input type="file" /> et ben ça marche avec eux, l'image preview s'affiche à côté...

[arnooo999]

Bonjour

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.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$('#form_photos input[type="file"]').change(function() {
 
						alert('test');
					});

Dans ce code tu ajoutes un listener sur tout les input qui existent au chargement de la page, si tu ajoutes dynamiquement des input par la suite, il n'y a pas de raison pour que ton listener 'onChange' soit appelé.

utilise la méthode "on" de jQuery avec trois arguments (sur les versions + anciennes de jquery on utilisait les méthodes live ou delegate)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('#form_photos').on('change','input[type="file"]',function() {
 	alert('test');
});

ou bien attache le listener sur onChange dans ta function "ajouterPhoto".

---

Je vous passe volontairement mon code de prévisulation des photos

Dommage ça m'interesse.., Est-ce que ce code fonctionne sur tout les navigateurs ?

[swingstar]

J'ai pas mis le code de prévisualisation pour pas faire chercher de ce côté car le problème ne vient pas de là, bref mais le voici si ça peut intéresser:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
$('#form_photos input[type="file"]').change(function() {
 
		var file = $(this);
		var reader = new FileReader;
 
		reader.onload = function(event) {
 
			var img = new Image();
 
		        img.onload = function() {
			     var ratio = img.width / img.height;
			     var width = 100;
			     var height = Math.round(width / ratio);
			     var canvas = $('<canvas></canvas>').attr({ width: width, height: height });
			     file.after(canvas);
			     var context = canvas[0].getContext('2d');
	        	    context.drawImage(img, 0, 0, width, height);
			};
 
			img.src = event.target.result;
		};
 
		reader.readAsDataURL(file[0].files[0]);
});

En tout cas merci pour la réponse je vais voir tout ça...

[swingstar]

Ça marche avec la méthode on
Un grand merci!!!!! Ça me permet de terminer ma journée sans l'impression d'être un gros naze et ça c'est cool!