Bonsoir les zéros !

J'ai un petite script que j'arrive pas à débuguer pour l'upload d'image, il me met cette erreur que j'arrive pas à comprendre:

Erreur parsing: SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data  dropFiles.js:54:8
TypeError: reponse is undefined

Voici le code js en question:

function upload(fichier, zone, i){
			var file = fichier[i];
			var progress = zone.find('.progression');
			if(file.type == "image/jpeg" || file.type == "image/gif" || file.type == "image/png"){
				if(file.size < 8000000000){
					var xhr = new XMLHttpRequest();
					xhr.addEventListener('load', function(e){
						progress.css({height: 0});
						try{
							var reponse = jQuery.parseJSON(e.target.responseText);
						}
						catch(e){
							console.log("Erreur parsing: " + e);
						}
						if(reponse.erreur != true)
						{
							var area = zone.clone();
							$(zone).removeClass().text(null).append(reponse.content).addClass('frame');
							area.insertAfter(zone).dropfiles({msg: null, script: "upload.php"});
							if(i < fichier.length -1){
								console.log('image ' + i +" uploader  !");
								upload(fichier, area, i+1);
							}
						}
						else{
							$(zone).removeClass().text("Erreur");
						}
					}, false);

					xhr.upload.addEventListener('progress', function(e){
						if(e.lengthComputable){
							var percent = (Math.round(e.loaded/e.total) *100) + "%";
							progress.css({height:percent}).html(percent);
						}
					}, false);

					xhr.open('post', o.script, true);
					xhr.setRequestHeader('content-type', 'multipart/form-data');
					xhr.setRequestHeader('x-file-type', file.type);
					xhr.setRequestHeader('x-file-size', file.size);
					xhr.setRequestHeader('x-file-name', file.name);
					xhr.send(file);
				}
				else{
					console.log('!! size !!');
					return false;
				}
			}
			else{
				console.log('!! type !!');
				return false;
			}
		}

Je n'arrive pas à comprendre l'erreur, je pense que c'est le jQuery.parse() mais je sais pas vraiment...

Pourriez-vous m'éclairer sur la question ?

Merci de votre aide !

Utiliser jQuery ET XMLHttpRequest ? as incompatible mais tant qu'à l'inclure, autant profiter de jQuery à fond nan ?

Sinon, que donne un console.log(e.target.responseText) juste avant le .parseJson ?

Il donne une chaîne vide... Comme si il n'y avait pas d'objet, bizarre...

Mais, il n'y a pas une fonction jQuery pour parser le JSON ? Comme cette fonction qui me donne la même erreur: jQuery.parse()

Novax a raison, je ne suis pas spécialement pour l'utilisation de jQuery, mais quitte à l'inclure dans ta page, autant utiliser $.ajax (ou inversement, utiliser JSON.parse et les querySelector)

Sinon le message d'erreur indique que le parse du JSON échoue car ton JSON n'est pas valide, et c'est normal vu que e.target.responseText est une chaine vide et qu'une chaine vide n'est pas un JSON valide.

Vérifie déjà que les données sont bien dans la réponse depuis l'onglet network des devtools chrome.

Bon, alors, après vérification de l'upload sur la console réseau firefox, il s'avère que j'ai une erreur 500 lorsqu'il demande le fichier upload.php qui me permet d'exécuter le script.

A quoi pourrais être dû l'erreur 500 ? Sachant que le site en production est en https...

Des idées car j'avoue que là, ça me dépasse un peu... :/

Yop, comme les précédents messages, je ne saisis pas vraiment.. tu as importé jQuery mais tu ne l'utilises pas pleinement ?

Ensuite, si tu as une erreur 500, c'est que la page n'éxiste pas (vérifie son emplacement), ou que ton fichier .php contient des erreurs qui empêchent l'execution du script dans son intégralité, vérifie les points virgule.. ou que tout est bon (ce qui est sur, c'est que ça ne l'est pas!)

Pour jQuery, je ne l'utilise pas pleinement car j'envoie des informations d'header pour un upload multiple et comme je sais pas faire la méthode $.ajax avec des headers, je le fais en xhr en attendant de trouver... (sinon, je sais comment fonctionne $.ajax).

Et effectivement, je sais que j'ai un problème avec mon fichier upload.php en erreur 500 et après vérification, il s'avère que c'est la fonction getallheaders() de php qui ne veut rien entendre... Pourtant en local, tout fonctionne très bien.

Existe-t-il une autre fonction semblable à celle-ci ?

voici le code php pour info:

<?php
/*session_start();
if($_SESSION['level'] < 2)
{
	header('location: index.php');
}
// dit à l'application que l'on renvoie du JSON
header('content-type: application/json');
require('inc/bin/base.class.php');
// récupère tous les headers*/
$h = getallheaders();
// créer une class vide pour le JSON
//$o = new stdClass();
//$o->erreur = null;
// récupère la source donnée en input
//$source = file_get_contents("php://input");
//$nom = explode('.', $h['x-file-name']);
//if(preg_match("#^[0-9]{1,}-[0-9]{1,}$#", $nom[0]))
	//$o->content = '<div class="img"><a href="img/galerie/'. $h['x-file-name'] .'" title="'. $h['x-file-name'] .'"><img src="img/galerie/'. $h['x-file-name'] .'" alt="'. $nom[0] .'" class="Adm_galerie_img" /></a></div><div class="infoImg"></div>';

	// on déplace le fichier dans le bon dossier
	//file_put_contents('img/galerie/'. $h['x-file-name'], $source);
	//$base = new base();
	//$base->execute('INSERT INTO galerie(url) VALUES(:url)', array('url' => $h['x-file-name']));
/*}else{
	echo 'Erreur';
}*/

// Envoie des données JSON
	//echo json_encode($o);
?>

EDIT: Sinon, comment on fait passer des headers avec mon fichier via $.ajax si je veut pas m'embêter.. ?

-
Edité par detect 26 mai 2017 à 12:03:39

Premier résultat avec "$.ajax header" https://stackoverflow.com/questions/10093053/add-header-in-ajax-request-with-jquery#13515414
+ As-tu essayé un var_dump(getallheaders()); ?

Après relecture de ton code, je te conseil de faire tes vérifications dans le script PHP et non en JS car très facilement contournable, ensuite, peut-être que l'erreur 500 est dû au fait que rien n'est envoyé (peut-être ?) as-tu vérifié dans network que tout est envoyé ? (l'utilisation de var.. dans un try en plus, oriente toi vers "let".)

-
Edité par Sapuraizu 26 mai 2017 à 12:11:47

J'ai toujours l'erreur 500 avec var_dump...

Et okey sinon, merci, je vais regarder

Suite à ton message, oui, je sais pour les vérifications, ça reste encore un test avec modification et mis en prod. sur le site.

Ben, en faite, j'ai aussi l'impression, mais pourquoi ça marchera pas sur un serveur distant d'un hébergeur alors que ça marcherai en local ?

Oui, j'ai vérifié, il me met l'erreur 500 lorsque ça appelle upload.php.

Le try était pour test, avant, il n'y en avait pas.

-
Edité par detect 26 mai 2017 à 12:15:46

Je te redirige donc vers ces 2 liens :

https://www.sanwebe.com/2012/06/ajax-file-upload-with-php-and-jquery
https://stackoverflow.com/questions/18428935/uploading-file-with-jquery-ajax

Les solutions y sont, bon courage!