Implementace Dropzone do základního formuláře. Nette 2.4 + PHP 7.2

před 5 lety
chemikus
Člen | 47
+
0
-

Ahoj,
zkoušel jsem hledat tady na foru a taky všude možně po netu, ale bohužel se mi pořád a pořád nedaří :( Poslední co jsem našel bylo vlákno asi 3 roky staré a abych se přiznal, tak i přesto jsem se v tom moc nevyznal a nepomohlo mi.

Používám PHP 7.2 a Nette 2.4 jQuery a všechny ostatní knihovny jsou aktuální.

Můj problém je jednoduchý, mám obyčejný formulář na upload obrázku – samostatně mi funguje bez problému. Jakmile jsem přidal dropzone.js, tak se mi pořád odesílá prázdný a já nevím, co jsem přehlédl. Fakt už nevím co dělám špatně :( Za každý nápad, jak to zprovoznit budu velmi rád :)

PS: Zkoušel jsem i oba dva komponenty co jsem tu našel, ale radši bych zprovoznil tenhle absolutní základ.

Ukázky jsou zde:

CompaniesPresenter

<?php
protected function createComponentCompaniesImagesForm() {
	$form = $this->companiesImagesFormFactory->create();

	$form->onSuccess[] = function () {
		$this->redrawControl("gallery");
	};

	return $form;
}
?>

CompaniesImagesFormFactory

<?php
public function create() {
	$form = $this->factory->create($this->session, $this->container, $this->translator);
	$form->getElementPrototype()->class = "dropzone";

	$form->addUpload('file', 'messages.forms.companies.images_file');
	$form->addSubmit("send", "messages.forms.companies.images_add_button");

	$form->onSuccess[] = array($this, "formAdd");
	$form->onError[] = array($this, "formError");
	return $form;
}

public function formAdd($form, $values) {
	$this->generalManager->beginTransaction();

	try {
		$gallery = $this->generalManager->addMedia($values->file, $values->companies_id, "gallery");
		$this->generalManager->add("companies_gallery", array("companies_id" => $values->companies_id, "gallery_id" => $gallery->id));
	} catch (Exception $e) {
		$form->addError($e->getMessage());
		$this->generalManager->rollBack();
		return;
	}

	$this->generalManager->commit();
}
?>

Latte šablona

<script src=„{$basePath}/3rdparties/nette-forms/nette.forms.js“></script>
<script src=„{$basePath}/3rdparties/nette-ajax/nette.ajax.js“></script>
<script src=„{$basePath}/3rdparties/dropzone/dropzone.js“></script>

<script>
	$(document).ready(function () {
		$.nette.init();
	});
</script>

{control companiesImagesForm}

před 5 lety
Barbarossa
Člen | 74
+
0
-

Můj problém je jednoduchý, mám obyčejný formulář na upload obrázku – samostatně mi funguje bez problému. Jakmile jsem přidal dropzone.js, tak se mi pořád odesílá prázdný

v tom případě problém v nette nehledej (a to už sem správně nepatří).

Zkusil bych se zaměřit na to jaký html kód ti latte ve finále vygeneruje (jestli to je opravdu shodné s dropzone.js dokumentací), zda console nehází nějaké errory atd.

BTW:
tohle (argumenty) bych přidal přímo do té form factory

$form = $this->factory->create($this->session, $this->container, $this->translator);
// abys mohl volat jen $this->factory->create() na všech místech...

EDIT:
+se zaměřit na nette ajax (podívat se jaká data se pak v XHR posílají) na 80 % bych tipoval, že problém bude zde…

Editoval Barbarossa (29. 11. 2018 11:09)

před 5 lety
Phalanx
Člen | 310
+
0
-

@chemikus Mrkni sem – https://forum.nette.org/…load-manager#…

před 5 lety
Pavel Kravčík
Člen | 1180
+
0
-

Jakmile jsem přidal dropzone.js, tak se mi pořád odesílá prázdný a já nevím, co jsem přehlédl.

v tom případě problém v nette nehledej (a to už sem správně nepatří).

Dovolím si nesouhlasit. Může se to týkat Nette, chodí Ti to v $_POST? Je možné, že to v successu formuláře neuvidíš. Mělo by to stačit obejít pomocí ->getRawBody() na input či formulář, z hlavy nevím.

před 5 lety
chemikus
Člen | 47
+
0
-

Kluci, díky za komentáře… trochu jsem si s tím pohrál (zkontroloval Ajax) a konzoli … bohužel výsledek stále stejný … Tady posílám co mi to píše, hodil jsem si var_dump pro $values ve formulář.

Upravený formulář

<?php
public function formAdd($form, $values) {

var_dump($values);
exit();

?>

BEZ AJAX

object(Nette\Utils\ArrayHash)#128 (2) { ["file"]=> object(Nette\Http\FileUpload)#19 (5) { ["name":"Nette\Http\FileUpload":private]=> string(31) "ar_4656_0_ng-detail-photo-p.jpg" ["type":"Nette\Http\FileUpload":private]=> NULL ["size":"Nette\Http\FileUpload":private]=> int(80385) ["tmpName":"Nette\Http\FileUpload":private]=> string(24) "C:\xampp\tmp\php7C54.tmp" ["error":"Nette\Http\FileUpload":private]=> int(0) } ["companies_id"]=> string(1) "3" }

Použití AJAX (tedy Dropzone)

object(Nette\Utils\ArrayHash)#126 (2) { ["file"]=> object(Nette\Http\FileUpload)#132 (5) { ["name":"Nette\Http\FileUpload":private]=> NULL ["type":"Nette\Http\FileUpload":private]=> NULL ["size":"Nette\Http\FileUpload":private]=> NULL ["tmpName":"Nette\Http\FileUpload":private]=> NULL ["error":"Nette\Http\FileUpload":private]=> int(4) } ["companies_id"]=> string(1) "3" }

Tohle je co mi to píše v DevTools – headers

Request URL: http://localhost:256/_adUI/www/companies/images?companies_id=3
Request Method: POST
Status Code: 200 OK
Remote Address: [::1]:256
Referrer Policy: no-referrer-when-downgrade

Takže to spíš vypadá, že Dropzone asi funguje správně, ale já neumím pracovat s fomulářem přes AJAX :)

Asi to nebudu řešit a vykašlu se na Dropzone a bude to jen klasický formulář pro upload fotografií. Zas tolik mi neplatí, abych to udělal tak moc vymazlený :)

před 5 lety
Pavel Kravčík
Člen | 1180
+
+1
-

A tohle máš také prázdné? $this->HttpRequest->getFiles(). My tu komponentu používáme mimo formulář ajaxově a jde to v pohodě.

před 5 lety
chemikus
Člen | 47
+
0
-

Pavel Kravčík napsal(a):

A tohle máš také prázdné? $this->HttpRequest->getFiles(). My tu komponentu používáme mimo formulář ajaxově a jde to v pohodě.

Možná velmi blbý dotaz :) Kde se mám zeptat co je obsahem?

před 5 lety
Pavel Kravčík
Člen | 1180
+
+1
-

Zkus tedy jednodušší variantu:

var_dump($_POST);
exit();
před 5 lety
chemikus
Člen | 47
+
0
-

Doplnil jsem

<?php
var_dump($_POST);
var_dump($_FILES);
var_dump($values);
exit();
?>

bez ajaxu

array(3) {
	["send"]=> string(18) "Nahrát fotografie"
	["companies_id"]=> string(1) "3"
	["_do"]=> string(26) "companiesImagesForm-submit"
}
array(1) {
	["file"]=> array(5) {
		["name"]=> string(31) "ar_4656_0_ng-detail-photo-p.jpg"
		["type"]=> string(10) "image/jpeg"
		["tmp_name"]=> string(24) "C:\xampp\tmp\php437B.tmp"
		["error"]=> int(0)
		["size"]=> int(80385)
	}
}

object(Nette\Utils\ArrayHash)#128 (2) { ["file"]=> object(Nette\Http\FileUpload)#19 (5) { ["name":"Nette\Http\FileUpload":private]=> string(31) "ar_4656_0_ng-detail-photo-p.jpg" ["type":"Nette\Http\FileUpload":private]=> NULL ["size":"Nette\Http\FileUpload":private]=> int(80385) ["tmpName":"Nette\Http\FileUpload":private]=> string(24) "C:\xampp\tmp\php437B.tmp" ["error":"Nette\Http\FileUpload":private]=> int(0) } ["companies_id"]=> string(1) "3" }

s AJAXEM (dropzone)

array(3) {
  ["companies_id"]=>
  string(1) "3"
  ["_do"]=>
  string(26) "companiesImagesForm-submit"
  ["send"]=>
  string(18) "Nahrát fotografie"
}
array(0) {
}
object(Nette\Utils\ArrayHash)#125 (2) {
  ["file"]=>
  object(Nette\Http\FileUpload)#131 (5) {
    ["name":"Nette\Http\FileUpload":private]=>
    NULL
    ["type":"Nette\Http\FileUpload":private]=>
    NULL
    ["size":"Nette\Http\FileUpload":private]=>
    NULL
    ["tmpName":"Nette\Http\FileUpload":private]=>
    NULL
    ["error":"Nette\Http\FileUpload":private]=>
    int(4)
  }
  ["companies_id"]=>
  string(1) "3"
}

Prostě tím Ajaxem ten soubor ne a ne poslat … Nemá to třeba nějaký problém s nastavením PHP nebo něčím takovým všeobecně? Já jsem takový „programátor“ amatér, co to má jako hobby, takže se v tom fakt moc nevyznám …

před 5 lety
radmax
Člen | 9
+
0
-

Otevři konzoli prohlížeče a zjisti si, co přesně odchází nebo taky neodchází.