[AJAX]fetch AJAX wgrywanie obrazu, poproszę o rady i poprawki kodu. Opcje

[casperii]

Witam , wracam z kolejnym błędem (pozdrawiam @nospor (IMG:style_emoticons/default/Lkingsmiley.png) )
Poniżej prezentuje kod , niestety męczę się z banalnym problem (IMG:style_emoticons/default/sad.gif)
Problem polega na tym, że nie przesyła obrazka / nie odbiera w pliku .php
Sam plik php jest 100% prawidłowy , katalog na serwerze ma prawidłowe chmody , problem tkwi gdzieś w podaniu prawidłowej wartości do przesłania.
Na konsoli błąd:
Uncaught (in promise) SyntaxError: Unexpected end of JSON input i tyczy się tej linii return response.json();

index.html

[HTML] pobierz, plaintext 
const upload_image = (file) => {
 
	if(!['image/jpeg', 'image/png'].includes(file.type))
	{
		document.getElementById('uploaded_image').innerHTML = '<div class="alert alert-danger">Z tym plikiem to wiesz gdzie możesz</div>';
 
		document.getElementsByName('sample_image')[0].value = '';
 
		return;
	}
 
	if(file.size > 2 * 1024 * 1024)
	{
		document.getElementById('uploaded_image').innerHTML = '<div class="alert alert-danger">Masz za dużego plika , max to 2mb</div>';
 
		document.getElementsByName('sample_image')[0].value = '';
 
		return;
	}
}
 
const form = document.getElementById('custom-step-news');
form.addEventListener('submit', function(e){
	e.preventDefault();
 
	const test = form.test.value;
	const sample_image = document.getElementsByName('sample_image')[0];
 
	upload_image(sample_image.files[0]);
 
	const form_data = new FormData();
	const file = document.getElementsByName('sample_image')[0].value = '';
	form_data.append('sample_image', file);
 
 
	fetch('xxupload.php', {
		method:"POST",
		headers: {
			'Content-Type': 'multipart/form-data',
		},
    	body:form_data
 
	}).then(function(response){
 
		return response.json();
 
	}).then(function(responseData){
 
		document.getElementById('uploaded_image').innerHTML = '<div class="alert alert-success">poszło</div> <img src="'+responseData.image_source+'">';
 
		document.getElementsByName('sample_image')[0].value = '';
 
	});
 
});
[HTML] pobierz, plaintext 

Ten post edytował casperii 14.07.2022, 16:55:09

[trueblue]

Przecież możesz sprawdzić w zakładce Network/Sieć jaką odpowiedź otrzymujesz od skryptu PHP.

[nospor]

Podejrzyj w konsoli przegladarki co konkretnie dostajesz i bedziesz widzial blad

[casperii]

Napisałem @nospor co w konsoli pojawia się:
Na konsoli błąd:
Uncaught (in promise) SyntaxError: Unexpected end of JSON input i tyczy się tej linii return response.json();

@trueblue zakładka "Sieć" nic nie pokazuje, wydaje mi się, że nie dochodzi do odpalenia pliku, poprzez błędną składnie.

[trueblue]

Sprawdź dobrze czy nie masz założonych filtrów na konkretne typy żądań lub nazwę pliku (we wspomnianej zakładce).

[casperii]

@trueblue nie mam założonych filtrów. Dziwne, jak zmienie zamiast :

[HTML] pobierz, plaintext 
form.addEventListener('submit', function(e){
[HTML] pobierz, plaintext 

usunę form i bezpośrednio zrobię onchange na dany input type file to plik się wgrywa na serwer.

[trueblue]

Jeśli błąd wywoływany jest w linii, którą wskazujesz, oznacza to, że następuje przekazanie żądania do serwera i zwrotka. Czyli musi być w zakładce Network.

Co robi ta linia?

[HTML] pobierz, plaintext 
const file = document.getElementsByName('sample_image')[0].value = '';
[HTML] pobierz, plaintext 

[nospor]

Napisałem @nospor co w konsoli pojawia się:

Mialem na mysli network rzecz jasna... Najwyraznie uzylem zbyt duzego skrotu myslowego (IMG:style_emoticons/default/wink.gif)

[casperii]

ok, problem rozwiązany, ale jeszcze chciałbym dopytać co robię źle z poniższym kodem:

[HTML] pobierz, plaintext 
form.addEventListener('submit', function(e){
	const test = document.getElementById("test").value;
	alert(test);
	console.log(test);
[HTML] pobierz, plaintext 

konsola jak i alert podaje wartość którą wpisałem w input. Natomiast json zwraca mi komunikat:
[object HTMLInputElement]

natomiast jeżeli na sztywno wpiszę w JS

[HTML] pobierz, plaintext 
form_data.append('test', 'jakiś test');
[HTML] pobierz, plaintext 

zamiast

[HTML] pobierz, plaintext 
form_data.append('test', test);
[HTML] pobierz, plaintext 

to json zwraca poprawnie treść. I teraz nie wiem czy coś źle przekazuje ajaxem, czy źle odbieram dane


aha , dane odbieram tak:

[HTML] pobierz, plaintext 
.then(function(responseData){
 
		document.getElementById('komunikat').innerHTML = '<div class="alert alert-success">ok ' +responseData.test+'</div> <img src="'+responseData.image_source+'">';
 
	});
[HTML] pobierz, plaintext 

o ile responseData.image_source zwraca poprawnie , tak responseData.test zwraca poprawnie jeżeli na sztywno przekaże treść w append.

Ten post edytował casperii 17.07.2022, 22:53:54

[trueblue]

Podaj większy fragment kodu gdzie tworzysz JSON.

[casperii]

@trueblue

[HTML] pobierz, plaintext 
const form_data = new FormData();
 
	form_data.append('sample_image', file);
	form_data.append('test', test);
 
	fetch("upload.php", {
 
		method:"POST",
 
    	body:form_data
 
	}).then(function(response){
 
		return response.json();
 
	}).then(function(responseData){
 
		document.getElementById('komunikat').innerHTML = 'test:  ' +responseData.test+'img: '+responseData.image_source+' ';
 
	});
[HTML] pobierz, plaintext 

[trueblue]

A zmienna test?

[casperii]

A zmienna test?

JS:

[HTML] pobierz, plaintext 
 
const test = document.getElementsByName("test").value // nie działa
const test = document.getElementsById("test").value // też nie działa
form_data.append('test', test); // nie działa
form_data.append('test', "coś wpisane"); działa
[HTML] pobierz, plaintext 

po stronie PHP:

[PHP] pobierz, plaintext 
$test = $_POST['test']; // przekazana na sztywno wartość działa
$data = array(
		'image_source'		=>	'/upload' . $new_name,
		'test' => $test
	);
 
	echo json_encode($data);
 
[PHP] pobierz, plaintext 

[trueblue]

Co to znaczy, że 3 linie dają wynik "nie działa"? Co zwracają? Czy na stronie jest jeden element o id=test?

[viking]

document.getElementsById("test").value nie ma takiej metody w js.z dokumentacji mdn formData.append("userfile", fileInputElement.files[0]);

[casperii]

Co to znaczy, że 3 linie dają wynik "nie działa"? Co zwracają? Czy na stronie jest jeden element o id=test?

nie działa = przekazuje [object HTMLInputElement]
tak mam input z takim ID i jest tylko 1

[html][/html]


@viking, czyli , że co jak robię fetchem upload to nie mogę wstawić dodatkowego pola input / textarea ?

Ten post edytował casperii 19.07.2022, 15:28:03

[viking]

Możesz. Ale gdzie to przekazujesz do FormData? Masz jedno wywołanie przez jakąś funkcję.