[RESOLU] Upload de fichier UploadHandler, affichage Json du nom du nouveau fichier téléchargé après téléchargement ok

11 avr. 2025, 21:01

Bonjour !

Je travaille avec l'UploadHandler bien connu de github

il fonctionnait bien avant le passage en php 8.1

les fichiers s'upload bien, mais je n'arrive pas à avoir l'affichage du résultat avec le nom du fichier téléchargé.
j'arrive à afficher "fichier téléchargé" mais il faut recharger la page pour le voir.

J'ai mis en place une console de débuggage, et je reçois le contenu du Json ainsi (j'ai remplacé mon lien par xxx):

Code : Tout sélectionner

"{"files":[{"name":"testb (8).jpg","size":890876,"type":"image\/jpeg","table_concernee":"employe","id_cible":"679","url":"..\/xxx\/server\/php\/files\/testb (8).jpg","thumbnailUrl":"https:\/\/xxx\/server\/php\/files\/thumbnail\/testb%20%288%29.jpg","deleteUrl":"https:\/\/xxx\/server\/php\/index.php?file=testb%20%288%29.jpg&_method=DELETE","deleteType":"POST","id":127}]}"

mon upload se nomme "testb.jpg" et je vois que je le reçois bien.

voici un bout de mon code pour afficher, je pense que le problème vient de par là :

Code : Tout sélectionner

 $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        done: function (e, data) {
			  // Vérification de la réponse 
            console.log(data.result); // Pour déboguer la réponse  
			
			var resultData = typeof data.result === 'string' ? JSON.parse(data.result) : data.result;
			
            if (data.result && data.result.files) {
                // Vider le contenu précédent si nécessaire  
                $('#monload').empty();

                $.each(data.result.files, function (index, file) {
                    // Créer un lien pour le fichier  
                    var $link = $('<br /><a />').attr({ href: file.url, target: '_blank' }).text(file.name);
		
              <?php /* $affiche_pj = $client->query("SELECT * FROM fichiers ORDER BY id DESC LIMIT 1");
			  $row_affiche_pj = $affiche_pj->fetch_assoc();*/
			  ?>$('#monload').append($link).html('Télechargement OK - mettre à jour pour voir la liste');
					 
                });
            } else {
                console.error("Erreur : la réponse ne contient pas de fichiers.");
            }

j'essaye d'afficher le lien $link, mais la seule chose que j'affiche c'est mon texte "Télechargement OK ..."
impossible de passer file.name.
si je met seulement $('#monload').append($link); j'ai juste le retour ligne <br>
j'ai même essayé de feinter en affichant les résultats de la bdd (en commentaire ici), mais ça ne m'affiche pas le dernier enregistrement, bien qu'il soit correctement présent dans la base. J'ai l'impression que ce code affiche le résultat avant l'insertion. Bref, ça ne serait pas propre de toute façon.

Auriez-vous une idée de ce qui cloche ?

J'ai essayé de faire corriger mon code par l'IA mais l'upload ne fonctionne plus du tout avec les solutions proposées....

merci de votre aide, je patauge depuis plusieurs jours...

16 avr. 2025, 20:28

Salut, $('<br /><a />') me semble pas correct, la création d'élément se fait un par un, pas deux ni plusieurs. La solution serait : $('<a/>') ou $('<a></a>')

https://learn.jquery.com/using-jquery-c ... w-elements

Si toute fois tu as besoin d 'ajouter un saut de ligne, ajoute le avant ton append($link) :

Code : Tout sélectionner

$('#monload').append('<br>').append($link)...

19 mai 2025, 12:22

Merci de ton aide two3d,

j'ai mis ce souci de côté et je n'avais pas vu ta réponse !
malheureusement cela ne fonctionne pas mieux.

sans le <br> je vois seulement la notification "Télechargement OK - mettre à jour pour voir la liste"

qui vient de là :
$('#monload').append($link).html('Télechargement OK - mettre à jour pour voir la liste');

var $link = $('<a/>').attr({ href: file.url, target: '_blank' }).text(file.name); renvoie la même chose,
et var $link = $('<a><a/>').attr({ href: file.url, target: '_blank' }).text(file.name); ne renvoie rien, même pas mon message.

ça fonctionnait avec la version précédente de php

19 mai 2025, 13:22

Tu peux insérer ton lien directement :

Code : Tout sélectionner

$('#monload').html(`Télechargement OK - mettre à jour pour voir la liste
<br>
<a href="${file.url}" target="_blank">${file.name}</a>`);
//mais il te faudrait voir si file.url et name existe également, elle est peut être là l'erreur.

19 mai 2025, 14:19

Oh !! ça fonctionne !! merci beaucoup, VRAIMENT !

19 mai 2025, 15:11

Et hop, résolu !

Content que ça fonctionne !

19 mai 2025, 15:40

Merci two3d

j'ai une dernière question... quand il y a plusieurs pièces jointes uploadées en même temps, le lien du dernier remplace le précédent. En clair, le div qui renvoie le résultat s'éfface pour chaque upload, ce qui crée une confusion.

J'ai tenté d'ajouter un code du type $n=0, while ($n<10){ ?> $('#load_pj<?php echo $n; ?>').html( ... <?php $n++; ] ?>
et aussi d'enlever le $('#load_pj').empty();
et en mettant évidemment côté page qui reçoit un echo"<div id='load_pj<?php echo $n; ?>'></div>";
mais ça ne fonctionne pas...

pourtant je vois bien $.each(data.result.files, function (index, file) { qui me laisse penser qu'il devrait créer une réponse pour chaque fichier ?

19 mai 2025, 20:55

Si tu vois bien " $.each(data.result.files, function (index, file) { ..." utilise le, crée des div à la volée. PHP avec JS ne fonctionnera jamais car PHP est figé une fois la page affichée, tant dis que JS est dynamique après le chargement de la page.

20 mai 2025, 10:21

Alors je ne sais pas faire ça... je suis plus à l'aise en php !

Il n'y a pas un truc comme variable[] ?
je ne sais aps comment gérer le each en javascript.

Code : Tout sélectionner

if (data.result && data.result.files) {
                // Vider le contenu précédent si nécessaire  
                $('#load_pj').empty();

                $.each(data.result.files, function (index, file) {
                    // Créer un lien pour le fichier  
const countUntil = 10;
let i = 0;
while (i++ < countUntil) {
                    var $link = $('<a/>').attr({ href: file.url, target: '_blank' }).text(file.name);
				$('#load_pj'+i+).html(`  <img src="images/ok.png" width="13" height="13" /><a href="${file.url}" target="_blank"> ${file.name}</a>`);
				
				}	
			
                });

mais il y a un truc qui cloche, c'est le each : je fais la boucle avant ?
si je fais une boucle dans le each, à quel moment je dois la mettre ?

je ne sais pas comment m'y prendre

20 mai 2025, 10:29

L'idée serait d'avoir une div où tu recevra tes fichiers uploadés et de les y afficher à la volé :

Code : Tout sélectionner

$.each(data.result.files, function (index, file) {
    // Créer dynamiquement un div et y insérer le lien
    const $container = $('<div/>').addClass('file-link');
    const $icon = $('<img/>', {
        src: 'images/ok.png',
        width: 13,
        height: 13
    });
    const $link = $('<a/>', {
        href: file.url,
        target: '_blank',
        text: ' ' + file.name
    });

    // Ajouter l'image et le lien au div
    $container.append($icon).append($link);

    // Ajouter ce div dans un conteneur existant
    $('#pj_container').append($container);
});

La div HTML :

Code : Tout sélectionner

<div id="pj_container"></div>

20 mai 2025, 11:28

Merci Steve ! ça fonctionne parfaitement !

21 mai 2025, 11:34

Parfait, tu peux passer en résolu

[RESOLU] Upload de fichier UploadHandler, affichage Json du nom du nouveau fichier téléchargé après téléchargement ok

Qui est en ligne