Formulaire post input type file auto créé

**eclisse** · 26/06/2021, 11h57

Bonjour,

J'ai hésité sur l'endroit ou poster cette question, puisqu'elle concerne à la fois html, javascript et asp. Si vous trouvez que ce sujet n'a pas sa place ici, on pourra toujours le déplacer dans une autre catégorie.

Descriptif :
J'ai un formulaire html/asp d'envoi de mail qui me permettait d'envoyer des mails (jusqu'à la normal) en y ajoutant des pièces jointes.
Seul nécessité, pouvoir ajouter des pj issues de répertoires distincts.
Je passait par un objet javascript multifile, qui regénerait un input (non multiple) à chaque chargement de nouveau fichier. Chaque fichier chargé était listé dans un tableau html, ce qui permettait éventuellement de le supprimer en cas d'erreur.
Or il semble devenu non compatible.

le soucis que j'ai c'est que (sous ff entre autre), des que je tente de créer un input à la volée, l'objet est bien créé et apparait à l'endroit où il est attendu, me permet de charger une pj, mais lors du submit, je n'ai aucun request file pris en compte...
Est ce normal ? Y a t-il eu une modification pour contrer des failles ? je vois pas bien où peut se situer l'erreur...

Sur la partie request, je travaille avec un Persits.Upload qui fonctionne très bien par ailleurs.
Si je créé en dur mon premier input sur la page, et les autres à la volée, le contenu du premier est bien passé en request et mon fichier créé, pas les autres.

le html :

Code HTML :

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
<BODY topmargin=0 leftmargin=0 onload='initForm()'>
<form name='ff' action="/dropzone/save.asp" ENCTYPE="multipart/form-data" onsubmit='return CtrlForm()'>
<table>
...
<!--- les autres champs --->
...
<tr>
	<td colspan=2>
		<table width="100%" id="inputsTable" border="0"><tbody>
				<tr>
					<td class=label><label for=fichier>Fichier à charger</label></td>
					<td><input id=fichier onchange="addInputFile()" size=20 type=file name=file /></td>
					</tr></tbody></table>
	</td>
</tr>
<tr>
	<td colspan=2 valign=bottom>
	<table width=100%>
	<tr>
		<td></td>
		<td align=right>
 
			<a class='pictoX2 pictoCancelBtnX2' id='btnQuit' title="Annuler" onclick='parent.closeWindow()'></a>
			<a class='pictoX2 pictoSendBtnX2' id='btnSave' title="Envoyer" onclick='ff.btnHideSave.click()'></a>
			<input name='btnHideSave' id='btnHideSave' type="submit"  class='HideSubmit'>
		</td>
	</tr>
	</table>
	</td>
</tr>
</table>

le javascript:

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
 
function addInputFile(){
        var inputs = document.getElementsByTagName('input');
        var nbInputFile = 0;
        var nbFile = 0;
        // boucle de vérification du nombre d'input type file total
            // et du nombre d'input type file renseignés
            for (i=0;i!=inputs.length;i++) {
        input = inputs[i];
        if (input.type == 'file') {
            nbInputFile++;
            if (input.value.length > 0) {
            nbFile++;
            }
        }
        }
        //Si tous les inputs type file sont renseignés, on en ajoute un
        if (nbInputFile == nbFile) {
        tbody = document.getElementById("inputsTable").firstChild;
        ligne = document.createElement('tr');
        cellule1 = document.createElement('td');
        cellule1.setAttribute('class','label');
        label = document.createElement('label');
        label.setAttribute('for','file'+nbInputFile);
        labelText = document.createTextNode('');
        labelText.data = 'Fichier à charger';
        cellule2 = document.createElement('td');
        inputFile = document.createElement('input');
        inputFile.setAttribute('type','file');
        inputFile.setAttribute('id','file'+nbInputFile);
        //inputFile.setAttribute('size','20');
        inputFile.setAttribute('name','file'+nbInputFile);
	inputFile.onchange = addInputFile; 
        label.appendChild(labelText);
        cellule1.appendChild(label);
        cellule2.appendChild(inputFile);
        ligne.appendChild(cellule1);
        ligne.appendChild(cellule2);
        tbody.appendChild(ligne);
        return true;
        }  
    }

Une idée ?
Merci de votre contribution.

**mathieu** · 28/06/2021, 21h41

lors de l'envoi du formulaire, c'est du code javascript qui envoie les données ou bien le navigateur ?

**eclisse** · 29/06/2021, 00h45

Bonjour Mathieu,
merci de te pencher sur mon sujet.

Idéalement, je souhaiterait plutôt que ça soit le navigateur qui envoi les données...
Comme c'est un formulaire d'envoi de mail, j'ai tout un tas de données à faire passer
Là, après 30 tentatives avec plusieurs objets différent, j'ai mis en place un dropzone.js bidouillé, qui me permet de le faire pour partie; Mais à la fin de la mise en place, je me suis aperçu qu'il entrait en conflit avec un textarea ckeditor sur la page, a priori pas compatible si j'en crois les recherches que j'ait faites.

Tu as des infos sur une éventuelle incompatibilité récente de ff avec les events createElement ou appendChild ? Jusqu'à présents ces méthodes de création à la volée semblait bien fonctionner...

**mathieu** · 29/06/2021, 01h01

je n'ai pas compris à quel moment est votre souci. le formulaire est envoyé en javascript pour le moment ?
montrez nous le code javascript qui est lancé quand le formulaire est envoyé.

**eclisse** · 29/06/2021, 08h36

Tu as le formulaire plus haut.

Ce formulaire est envoyé par la navigateur sur un post classique avec la balise enctype qui va bien et un bouton submit qui procède à l'envoi.

La javascript indiqué n'est là que pour créer à la volée des input type file qui me permet de charger plus d'un fichier, dont le répertoire d'origine n'est pas le même que celui du premier fichier chargé.
Le soucis est que lorsque j'ajoute ces nouveaux inputs, ils sont bien ajouté au DOM, apparaissent dans ma form, je les charge avec un fichier, et leur valeur n'est pas transmise.

Si je créé en dur 1 input file dans mon form, sa valeur est bien envoyée dans mon post, mais celle des autres.
Coté server, j'ai 1 fichier uploadé sur X transmis.

Si je les créé tous à la volée, aucune valeur n'est envoyé.
Coté server, si je boucle sur les objets file transmis, je me retrouve avec ... rien!

**mathieu** · 29/06/2021, 23h26

dans la balise "form", ajoutez method="POST"

**eclisse** · 01/07/2021, 23h30

Honnêtement Matthieu, à la lecture de ton message, je me suis demandé s'il n'y avait pas foutage de gueule... method="post"... genre oubli de débutant stagiaire niveau -7...
En regardant mon post et l'exemple, j'ai d'abord cru défaillir en n'y voyant pas la méthode indiquée dans le formulaire...
Alors évidemment, comme j'ai pas mal galéré à trifouiller mon code dans tous les sens pour le faire fonctionner, j'ai perdu tout mon formulaire initial que je vais refaire.
J'ai fait quand même un rapide copier coller du code sur une nouvelle page pour tester et me dire que non, je n'avais perdu 15 jours pour une connerie de méthode sur un formulaire... et, là, les fichiers semblent passer...!!!

Des baffes, je vais me mettre des baffes!!

Je vais ré-essayer de retrouver la form initiale que j'avais mis en place, avec les bonnes dépendances Jquery/java et tutti quanti, et la méthode post, et je reviens clôturer ce post si c'est bien cet oubli à la noix qui ma mis en l'air 15 jours de boulot.
Merci de ta participation.

**ProgElecT** · 02/07/2021, 08h54

Salut

Envoyé par mathieu

dans la balise "form", ajoutez method="POST"

......

Envoyé par eclisse

Honnêtement Matthieu, à la lecture de ton message, je me suis demandé s'il n'y avait pas foutage de gueule... method="post"... genre oubli de débutant stagiaire niveau -7...

Ben moi je ne vois pas ce paramètre renseigné dans le code que tu as mis jusqu'ici.

**eclisse** · 02/07/2021, 11h40

oui, c'est bien ce que je dit...
va falloir que je précise maintenant quand je fais une réponse ironique...
pourtant je croyais qu'il y avait suffisament de signe...

genre oubli de débutant stagiaire niveau -7...

Des baffes, je vais me mettre des baffes!!

Bon test refait, il semble bien que le soucis se situait sur la méthode POST du formulaire...
Ce qui est incroyable, c'est cette capacité à ne pas voir le paramètre manquant ou la faute de frappe qui met tout par terre...
Quand on a la tête dans le guidon, pas facile de voir la roue voilée...
Merci Mathieu d'avoir pointé la faille!

Formulaire post input type file auto créé

JavaScript

Discussions similaires

Partager

Partager