Discussion :

[bart64]

Bonjour,

Je viens vous demander vos conseils parce que je ne suis pas du tout un expert du javascript / php.

Dans une page web, l'utilisateur sélectionne un fichier CSV et fait un mapping entre les colonnes du fichier (1ère ligne du fichier) et des colonnes cibles qui permettront de charger ces données dans une table de la base de données.
Pour le mapping, c'est OK.
Ensuite, j'avais dans l'idée de transmettre depuis javascript les données (fichier + mapping) à une page PHP pour insérer les données du fichier dans la BDD.

Code :

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

1
2
3
4
5
6
7
8
9
 
    const url = 'get_mapping.php';
    const method = 'post';
    const xhr = new XMLHttpRequest();
    const data = new FormData(form);
    data.append("my_file", data);
 
    xhr.open(method, url);
    xhr.send(data);

Mais avec cette méthode, j'ai l'impression que :

• Je ne peux pas tester le script PHP (tout se fait en arrière plan)
• Je ne pourrai jamais réussir à récupérer les éléments de la page web pour connaître le mapping fait par l'utilisateur
• L'envoi d'un fichier via XMLHttpRequest n'est pas vraiment adapté

J'aimerais me tromper mais je voudrais savoir si j'ai raison ?
Et si ça n'est pas la bonne méthode, pourriez-vous m'éclairer sur la meilleure façon de faire ?

Merci beaucoup pour votre aide !

[mathieu]

est ce que le mapping se fait entièrement en javascript sans envoyer le fichier au serveur ?

si c'est le cas, vous avez le contenu du fichier dans une variable javascript donc vous pouvez envoyer ce contenu à un script php.
cela peut se faire sans problème avec la fonction fetch et une requête post (https://developer.mozilla.org/fr/doc.../fetch#exemple)

et ensuite un bout de code en php permet de faire toutes les étapes suivantes

1. lecture du contenu du fichier
2. analyse du contenu csv pour le découper en enregistrements et colonnes (https://www.php.net/manual/fr/function.fgetcsv.php)
3. insertion de ces données dans la base de données

pour débuger la requête d'envoi des données, vous pouvez utiliser l'onglet "Réseau" de la console de développement de votre navigateur.
par exemple avec Firefox, faites Ctrl + Maj + E
https://developer.mozilla.org/fr/doc...ur_r%C3%A9seau

[bart64]

Bonjour Mathieu,

Merci beaucoup pour toutes ces infos, ça me permet d'avoir toutes les clés en main. Je ne connaissais pas cette fonction de la console et c'est très pratique.

Après avoir ramé tout l'après-midi, j'ai enfin réussi à faire fonctionner la fonction fetch. C'est la solution parfaite pour pouvoir envoyer plusieurs objets à la page PHP.

Mais j'ai remarqué que j'ai un problème pour des fichiers volumineux. Après 2 secondes, le fetch s'arrête quoiqu'il arrive et le fichier n'est pas uploadé. J'ai trouvé cette vidéo qui est censée régler le problème :

Mais est-ce qu'il y aurait plus simple ?
Merci

[ABCIWEB]

Bonjour Mathieu,
Mais j'ai remarqué que j'ai un problème pour des fichiers volumineux. Après 2 secondes, le fetch s'arrête quoiqu'il arrive et le fichier n'est pas uploadé. J'ai trouvé cette vidéo qui est censée régler le problème :
Mais est-ce qu'il y aurait plus simple ?
Merci

Fort possible que tu dépasse les limitations "upload_max_filesize" et/ou "post_max_size" de ton serveur. Ce sont ces valeurs qui limitent la taille des fichiers pouvant être uploadés. Le plus simple est d'augmenter ces valeurs suffisamment pour ne plus avoir ce problème.

Mais effectivement si tu n'as pas accès à ces réglages c'est beaucoup moins simple, car il faut couper les fichiers en morceaux (d'où les instructions "chunk" que tu vois dans le code de ta vidéo) à une taille inférieure aux valeurs "upload_max_filesize" et "post_max_size" de ton serveur lors de l'envoi du formulaire, et recoller les morceaux côté serveur en php quand ils ont tous été chargés, ce qui nécessite donc plusieurs requêtes ajax.

Il existe un module d'upload ajax/php ici qui fait ça de façon transparente. Il suffit de télécharger le fichier sur ton ordinateur, de le dézipper, puis de mettre le dossier sur ton serveur php. Ensuite tu pourras tester directement (sans aucune configuration nécessaire) les nombreux exemples prêts à l'emploi, et tu verras que tu peux télécharger des fichiers de n'importe quelle taille, sans avoir à modifier tes limitations serveur.

[bart64]

Merci ABCIWEB !!

Effectivement, tu as raison, c'est la limitation de la taille du fichier dans le php.ini qui me bloque. Ta solution m'a l'air super : pas besoin d'avoir accès au php.ini, on peut l'utiliser partout.
J'ai pu importer un gros PDF avec le module de test, ça fonctionne parfaitement.

Pour le moment, je n'ai pas encore réussi à importer mon CSV. J'ai bien autorisé l'extension dans le javascript et dans le php mais j'obtiens l'erreur "Echec du téléchargement. Type de fichier non valide.".
Je n'ai pas encore assez cherché d'où ça peut venir.

Je continue mes recherches.

Un grand merci !

PS : je mettrai le post en résolu une fois que mes CSV s'importeront ( je te tiendrai au courant ).

[ABCIWEB]

Merci ABCIWEB !!

Effectivement, tu as raison, c'est la limitation de la taille du fichier dans le php.ini qui me bloque. Ta solution m'a l'air super : pas besoin d'avoir accès au php.ini, on peut l'utiliser partout.
J'ai pu importer un gros PDF avec le module de test, ça fonctionne parfaitement.

Pour le moment, je n'ai pas encore réussi à importer mon CSV. J'ai bien autorisé l'extension dans le javascript et dans le php mais j'obtiens l'erreur "Echec du téléchargement. Type de fichier non valide.".
Je n'ai pas encore assez cherché d'où ça peut venir.

Je continue mes recherches.

Un grand merci !

Effectivement il peut y avoir des problèmes de contrôle de type MIME pour certaines extensions. Aussi la classe d'upload serveur permet d'exclure certaines extensions du contrôle de type MIME.

Dans ton cas pour autoriser les fichiers ayant les extensions PDF et CSV tout en excluant les fichiers CSV du contrôle du typt MIME :

Code php :

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

1
2
3
4
5
6
7
8
9
10
 
//...
$config = [
"dossier_destination" => $dossier_destination,
"extensions" => ["csv","pdf"],// extensions autorisées
"verif_type_MIME" => ["except" => ["csv"]] // Extensions dont le type mime ne sera pas contrôlé. Tu pourrais compléter le tableau des exceptions si besoin par exemple ["except" => ["csv","MTS","mt2s"]]
];
 
$up = new UploadAjaxABCIServeur($config);
//...

Voir ce paragraphe pour la configuration de la classe php d'upload.

A noter qu'à défaut du contrôle de type MIME, il est vivement conseillé (notamment si ton module d'upload est en accès libre) de vérifier la validité du fichier par exemple en tentant de l'ouvrir avec php ou d'effectuer des opérations sur ce fichier avec php, avant de le transférer dans son emplacement définitif. C'est un autre moyen de vérifier sa validité.

Mais si j'ai bien compris, ton ficher csv doit servir à alimenter une bdd donc fatalement tu va l'exploiter avec php avant de peut-être le sauvegarder sur ton serveur. L'absence de contrôle de type MIME ne posera donc pas de problème puisque si ce n'est pas un fichier CSV, php va buguer et renvoyer une erreur.

Note aussi que si tu ne souhaites pas transférer le fichier csv sur ton serveur (si inutile dès qu'il a renseigné ta bdd) consultes ce lien. Et enfin pour connaitre l'extension du fichier et adapter le code suivant son extension utilises les méthodes serveur. De nombreux exemples de code sont fournis dans le dossier "Php_Upload" qui regroupe les fichiers utilisés côté serveur.

Enfin si tu as d'autres questions sur ce module d'upload, utilises ce topic, je te répondrai début de semaine prochaine.

[bart64]

Merci pour toutes ces précisions, c'est top ! Grâce à ton aide, j'ai réussi à faire fonctionner ce module sur mon site, c'est vraiment parfait, ça répond exactement à ma question.

Je vais poser une question complémentaire sur le lien que tu m'as donné.

Bonne fin de WE !