Axios + Nette REST API – funkce pro file upload

Mára98

Dobrý den,

na clientovi odesílám skrze Axios requesty s FormData – obrázky, zip soubory a tak dále. Na straně backendu se snažím v Nette udělat jednoduchou REST api. Jak přesně by měla vypadat v Nette funkce, která data převezme a nahrané soubory uloží třeba do složky uploads? Sem v Nette nový, tak se omlouvám, jestli mi něco uchází. Marně s tím bojuji už druhý den.

Předem děkuji za jakékoliv rady.

Milo

Něco o práci s HTTP protokolem v Nette, ikdyž spíš o responses: https://blog.nette.org/…ovedi-cast-1

Pro tebe je tam důležitá metoda presenteru getHttpRequest() a API https://api.nette.org/…Request.html

Napiš si akci presenteru, v ní se přes zmíněné API dostaneš k odeslaným datům. Jak je uložíš je na tobě.

Mára98

Ahoj, děkuju mockrát za nasměrování a tvůj čas. Už cítím, že se blížím, ale furt někde něco dělám špatně. Momentálně mám tohle:

Latte / HTML:

<input type="file" id='fileupload'>
<button onclick='upload()'>Upload</button>

JavaScript:

// Upload file
function upload() {
    // Creates new form data
    var data = new FormData();

    // Gets file upload input
    var input = document.querySelector('#fileupload');

    // Append data
    data.append('file', input.files[0]);

    // Send request
    axios.post('http://localhost:8888/odevzdat/www/api/data', data, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
    .then(function (response) {
        // Handle success
        console.log(response);
    })
    .catch(function (error) {
        // Handle error
        console.log(error);
    });
}

PHP:

// Handles file upload logic on server side
public function actionData()
{
	// Get HTTP request
	$request = $this->getHttpRequest();

	// Get data
	$data = $request->getHeader('file');

	// Send data back
	$this->sendJson([
		'data' => $data
	]);
}

Když mi pak přijde response, data jsou null. Co dělám špatně?

Editoval Mára98 (19. 1. 2019 15:08)

Mára98

Ještě malý update: když změním akci v presenteru tak, aby rovnou vrátila získaný request zpět, dostanu zase null.

// Handles file upload logic on server side
public function actionData()
{
	// Get HTTP request
	$request = $this->getHttpRequest();

	// Send data back
	$this->sendJson([
		'data' => $request
	]);
}

Tohle mi taky moc nevyšlo:

// Handles file upload logic on server side
public function actionData()
{
	// Get files
	$files = $this->getHttpRequest()->getFiles();

	// Send data back
	$this->sendJson([
		'data' => $files
	]);
}

Hádám, že to asi celý chápu úplně špatně.

Editoval Mára98 (19. 1. 2019 15:22)

Mára98

Tak sem přišel na to, že ještě musím tlačítko a input zabalit do formu s enctype='multipart/form-data' :

<form enctype='multipart/form-data'>
    <input type="file" id='fileupload' >
    <button onclick='upload()'>Upload</button>
</form>

Dostávám ale teď úplně prázdný axios Network error tak na čtvrt sekundy a pak se stránka hned refreshne.

Editoval Mára98 (19. 1. 2019 16:07)

Mára98

Tak sem dal pryč ten formulář a už to zase funguje. Nechápu proč a jak, každopádně děkuju za užitečný odkazy!