Witam , wracam z kolejnym błędem (pozdrawiam @nospor )
Poniżej prezentuje kod , niestety męczę się z banalnym problem
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 

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

Podejrzyj w konsoli przegladarki co konkretnie dostajesz i bedziesz widzial blad

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.

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

@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.

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 

Mialem na mysli network rzecz jasna... Najwyraznie uzylem zbyt duzego skrotu myslowego

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.

Podaj większy fragment kodu gdzie tworzysz JSON.

@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 

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 

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

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

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 ?

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