Discussion :

[PhilippeF75]

Bonjour à tous et merci d'avance pour vos lumières.

Le contexte :
Il s'agit d'un site de recettes de cuisine dans lequel les membres peuvent insérer des recettes accompagnées de photos.
Le PHP de base ne me pose aucun souci, traiter un formulaire avec des input de type "file" est un grand classique.
Je propose de plus en JavaScript, après avoir choisi une photo,
1. de la visualiser dans un élément HTML "img". Là encore, aucun souci, tout se passe bien.
2. de la recadrer. Cela se passe dans un canvas inséré dans une lightbox et fonctionne parfaitement. Dès que l'utilisateur a terminé, il clique sur un bouton de la lightbox, celle-ci disparaît et la photo recadrée vient remplacer la photo originale dans l'élément "img" correspondant. C'est l'upload de la photo recadrée qui me pose problème.

Fonctionnement :
Pour récupérer la photo recadrée, je me sers d'un second canvas invisible (display:none) dans lequel je crée un nouvel élément grâce à getContext('2d') et où je redessine l'image avec la fonction drawImage() puis je l'affiche dans l'élément "img" en lui donnant comme source la valeur obtenue par la fonction toDataURL().

Mais l'upload de cette source me conduit systématiquement à une erreur, voici le code de cette fonction que j'utilise certainement mal :

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
function uploadFile(nomInpFile, imgSrc)
{
	var	xhr = new XMLHttpRequest(),
		formData = new FormData();
 
	formData.append(nomInpFile, imgSrc);
	xhr.open('POST', urlDest, true);
	xhr.onload = function(){
		//alert(nomInpFile+' téléchargé dans '+urlDest);
		handleComplete(imgSrc.size);
	};
	xhr.onerror	= function(){
		alert(this.responseText);
		handleComplete(imgSrc.size);
	};
	xhr.upload.onprogress = function(event){
		handleProgress(event);
	}
	xhr.send(formData);
}

Les arguments que j'utilise pour cette fonction :
- nomInpFile est le nom de l'input de type "file" du formulaire
- imgSrc est la chaîne source de l'élément "img" dont je parle plus haut (*)
Le contenu de la chaîne urlDest est le fichier PHP qui va traiter le formulaire avec son chemin complet ('https [...... ] fichier.php')
NB : le "alert" n'est là que pour la mise au point et il m'indique que l'upload s'est bien passé...
Mais quand je valide le formulaire (bouton de type "submit"), je n'ai pas de fichier chargé dans le input "file" ($_FILES[$nomInpFile]['tmp_name'] est vide).

Éclairez-moi SVP.

[Loralina]

Bonsoir,

- imgSrc est la chaîne source de l'élément "img" dont je parle plus haut (*)

Le point à revoir pourrait se situer ici.

Je n'ai plus trop canvas en tête, mais j'ai fait un test qui fonctionne en reprenant le code à l'identique.
Voici deux variantes qui permettent de faire arriver l'image dans $_FILES :

1)

Code :

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

canvas.toBlob(function(blob) {uploadFile("voiture",blob);},"image/jpeg",0.9);

Pour cette version, on peut ajouter un troisième paramètre dans le append : formData.append(nomInpFile, imgSrc, "voiture.jpg");

2)

Code :

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

canvas.toBlob(function(blob) {uploadFile("voiture",new File([blob],"voiture.jpg",{type:blob.type}));},"image/jpeg",0.9);

Dans les deux cas, on aura $_FILES['voiture']['name'] qui vaudra "voiture.jpg".


Je laisse également mon test complet :

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
32
33
34
35
36
37
38
<image src="alpine.jpg">
<script>
const urlDest="test.php";
function handleProgress() {}
function handleComplete() {}
 
function uploadFile(nomInpFile, imgSrc)
{
        var     xhr = new XMLHttpRequest(),
                formData = new FormData();
 
//      formData.append(nomInpFile, imgSrc, "voiture.jpg"); //version 1
        formData.append(nomInpFile, imgSrc); //version 2
        xhr.open('POST', urlDest, true);
        xhr.onload = function(){
                //alert(nomInpFile+' téléchargé dans '+urlDest);
                handleComplete(imgSrc.size);
        };
        xhr.onerror     = function(){
                alert(this.responseText);
                handleComplete(imgSrc.size);
        };
        xhr.upload.onprogress = function(event){
                handleProgress(event);
        }
        xhr.send(formData);
}
 
document.getElementsByTagName("img")[0].addEventListener("load",function tutu() {
        this.removeEventListener("load",tutu);
        const canvas=document.createElement("canvas");
        canvas.setAttribute('width',this.width);
        canvas.setAttribute('height',this.height);
        canvas.getContext("2d").drawImage(this,0,0);
//      canvas.toBlob(function(blob) {uploadFile("voiture",blob);},"image/jpeg",0.9); //version 1
        canvas.toBlob(function(blob) {uploadFile("voiture",new File([blob],"voiture.jpg",{type:blob.type}));},"image/jpeg",0.9); //version 2
});
</script>

test.php

Code :

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

<?php move_uploaded_file($_FILES['voiture']['tmp_name'],$_FILES['voiture']['name']);?>

Je ne dis pas que c'est la meilleure méthode, j'ai fait tout ça un peu de mémoire et en reprenant une partie d'un code que j'avais déjà mis sur le forum.

[PhilippeF75]

Bonsoir et merci Loralina pour ces pistes que je vais explorer rapidement.

Voilà qui est fait. Ca marche super bien ! J'ai utilisé la version 2 pour des raisons pratiques.
Merci à toi, tu me sors d'un joli pétrin.