Upload souboru/souborů – jak na to?

Díky za tipy. Asi nejdřív zkusím WebChemistry-Images.

Mám zde ale problém s instalací přes composer – composer require webchemistry\images:1.4.3:

./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - The requested package webchemistry\images could not be found, it looks like its name is invalid, "\" is not allowed in package names.

Potential causes:
 - A typo in the package name
 - The package is not available in a stable-enough version according to your minimum-stability setting
   see <https://groups.google.com/d/topic/composer-dev/_g3ASeIFlrc/discussion> for more details.

Read <https://getcomposer.org/doc/articles/troubleshooting.md> for further common problems.

Installation failed, reverting ./composer.json to its original content.

Koukal jsem i na packagist.org ale nenašel bych tam že bych měl špatně příkaz… Nevíte čím to může být způsobeno?

Editoval Croc (11. 11. 2015 8:09)

Díky :)

BTW umí DropzoneUploader, MultiFileUpload nebo WebChemistry toto (či trochu podobné)? → Demo

Ani jeden nemá live demo, tak nevím co od toho čekat :-)

Editoval Croc (11. 11. 2015 8:41)

Díky za tip. Koukal jsem na licenci a toto budu určitě prvních pár let splňovat:

When do I need to purchase a license?
You must purchase a license if you are going to use Fine Uploader for a commercial product or in a commercial setting. If you are developing an open-source or free product and will not derive any money from the product using Fine Uploader, you may use Fine Uploader free of charge under the Widen Commercial License.

Stránky budou pro veřejnost a ze začátku určitě nebudu (jestli někdy vůbec:-) ) na nich vydělávat. Potom bych licenci asi musel dokoupit.

Dnes na něj kouknu a uvidím :-)

Tak ten Dropzone se mi líbí úplně nejvíce. Je také možné ho dát do bootstrap3 vzhledu.

@Oli Jestli můžu, vyzkoušel bych tedy tvůj DropzoneUploader. Máš ho v composer repository? Jak je možné ho nainstalovat a nakonfigurovat?

Já svůj dropzone používám spolu s https://github.com/…te-webimages.

@Croc Snad se dneska dostanu k tomu napsat nějaký readme.

Tak jsem aspon v rychlosti updatoval readme

@iguana007 heh, sorry. ono se to tu řešilo tak napůl: https://github.com/…zoneUploader

@Oli Super díky moc :) Pustil jsem se pomalu do práce, ale mám několik dotazů:

1. `extensions:

   map: Oli\Form\DropzoneUploaderExtension` → asi tam máš překlep :) „map“

2. Pokud mám presenter takto:

use Nette,
    Oli\Form\DropzoneUploaderFactory,
    Oli\Form\DropzoneUploader;

class Presenter extends BasePresenter
{
    /** @var DropzoneUploaderFactory
     * @inject
     */
    public $factory;

    public function __construct(Nette\Database\Context $database)
    {
        $this->database = $database;

    }


    public function createComponentUploader($name, DropzoneUploaderFactory $factory) //chyba ukazuje na tento řádek
    {
        $dropzone = $factory->create();
        $path = $dropzone->getPath();
        $dropzone->onSuccess[] = function (DropzoneUploader $dropzoneUploader, $targetPath, $name, $suffix) {
            $photo = new Photo;
            $photo->filename = $name . '.' . $suffix;
            $photo->suffix = $suffix;

            $this->photosRepository->save($photo);
        };
        return $dropzone->setPath($path . '/' . $this->galleryEntity->folder . '/1600x1200');
    }

Tak mi to zahlásí tuto hlášku:

Recoverable Error

Argument 2 passed to App\Presenters\Presenter::createComponentUploader() must implement interface Oli\Form\DropzoneUploaderFactory, none given,
 called in G:\workspace\master\vendor\nette\component-model\src\ComponentModel\Container.php on line 181 and defined

Dělám něco špatně?

Editoval Croc (12. 11. 2015 8:09)

Já sem debžon. Sice jsem si injectnul komponentu, ale pak ji nezavolal správně:

$dropzone = $factory->create(); // špatně

$dropzone = $this->factory->create(); //správně

To že používáš doctrine jsem kupodivu poznal :). Ale díky za příklad, šikne se :)

Večer dám vědět jak se to povedlo.

Zatím díky moc

Editoval Croc (12. 11. 2015 10:05)

Pátral jsem, ale nenašel jsem že default je wwwDir. Takže díky :)

Aktuální kód mám takto:

 public function createComponentUploader($name)
    {
        $dropzone = $this->factory->create();
        $path = $dropzone->getPath('\upload');
        $dropzone->onSuccess[] = function (DropzoneUploader $dropzoneUploader, $targetPath, $name, $suffix) {
         /*   $photo = new Photo;
            $photo->filename = $name . '.' . $suffix;
            $photo->suffix = $suffix;

            $this->photosRepository->save($photo);*/
        };
        return $dropzone->setPath($path);
    }

Při samotném uploadu dostanu tuto chybu:

Fatal error: Call to undefined function Nette\Http\finfo_file() in G:\workspace\master\vendor\nette\http\src\Http\FileUpload.php on line 87 exception
 'ErrorException' with message 'Call to undefined function Nette\Http\finfo_file()'
in G:\workspace\master\vendor\nette\http\src\Http\FileUpload.php:87 Stack trace: #0 [internal function]:
Tracy\Debugger::shutdownHandler() #1 {main} (stored in G:\workspace\master\app\..\log\exception--
2015-11-12--08-53--6e173df2fe.html)

Nevíš kde by mohl být problém?

Editoval Croc (12. 11. 2015 10:50)

getPath a setPath nemusíš používat, pokud ti stačí defaultní path z configu. Já to tam mám, protože jsem potřeboval nějakou jinou. Takže jsem si pomocí $path = $dropzone->getPath(); vytáhnul to, co dostal Dropzone z configu jako path a pomocí setPath($path . '/' . $this->galleryEntity->folder . '/1600x1200'); jsem mu nastavil další zanoření. Takže výsledek je ten, že se to uloží podle téhle logiky:

// bez setPath
server/project/www/gallery // gallery je defaultní z configu. Pokud si to tam přepíšeš, bude to jiná složka/strom.

// s setPath
server/project/www/gallery/gallery-folder/1600x1200 //z příkladu

Takže pokud to chceš uložit jen do složky gallery a neukládat do db, tak by ti mělo stačit dokonce jen tohle

public function createComponentUploader($name)
   {
       $dropzone = $this->factory->create();
//       $dropzone->onSuccess[] = function (DropzoneUploader $dropzoneUploader, $targetPath, $name, $suffix) {
//       };
       return $dropzone;
   }

Vypada to, ze nemas styly z dropzonu. Jinak ten muj doplnek zatim umi jen uploadovat. Mazat po nahrani to neumi… zobrazeni nahranych, editaci, mazani, … to si musis dodelat sam. Tohle zatim umi opravdu jen upload

Edit: ta chyba je kvuli tomuto: https://github.com/…xtension.php#L34

Editoval Oli (12. 11. 2015 12:45)

Zatím koukám jak by se dal implementovat výmaz již uplodovaného souboru. Nějakou představu už mám, ale mám jednu otázku. Dle dokumentace dropzonejs stačí do configu přidat addRemoveLinks: true a díky tomu by se měl ke každému thumb přidat <a class="dz-remove">Remove file</a>, viz zde.

U tebe se tomu tak neděje, protože s tímto parametrem nepracuješ. Tím pádem to tam nikde nevykresluješ, je to tak?

Editoval Croc (12. 11. 2015 15:36)

Kdyžtak to zkusím nějak pořešit a pokud by se mi to kloudně podařilo tak pošlu PR. Aktuálně mám ještě dost jiných věci na práci, takže mě to zatím úplně netlačí (ale koncem roku bude).

To mazání jsem myslel hlavně pro uživatele, kteří si nahrajou obrázek a budou ho chtít hned smazat (nahráli špatný, atd.). Dropzone nabízí funkci kdy najedeš na uploadovaný obrázek a rovnou ho můžeš smazat.

Samozřejmě máš pravdu :-) Až budu mít čas, tak to opravím. Nebo jestli to potřebuješ co nejdříve, tak pošli PR. Mám tam i typo maxFilesize má být maxFiles. Mělo by to staačit jen přepsat v DI a přidat do js souboru. Do js souboru to přidáš jako settings.maxFiles

Ono tam těch bugů bude víc, vím asi o 3 drobnejch chybičkách, ale zatím jsem se k tomu nedostal :-(

Editoval Oli (12. 11. 2015 21:32)

Tak jsem se trochu víc rýpal ve tvé extension :) a mám následující poznatky:

1. Obsah JS souboru dropzoneUploader.js vůbec není potřeba. Když jsem ho smazal, funkčnost byla stejná.
2. Nastavení v extension není bráno v potaz (ani po těch úpravách co jsi psal výše) – DropzoneUploaderExtension.php – (maxFiles, atd.).
3. Upravil jsem trochu šablonu:

{* Latte template *}
{block content}
<form n:name="uploadForm" class="dropzone alert alert-info" id="myDropzone">
	<div class="fallback">
		<input type="file" n:name="file"/>
	</div>
	<div class="fileUpload-settings" data-fileUpload-settings="{$uploadSettings}"></div>

</form>
{/block}

4. Rozchodil jsem nastavení v místě použití:

<script>
Dropzone.options.myDropzone = {
    maxFiles: 1,
    maxFilesize: 1, // MB
    addRemoveLinks: true, // přidá remove link pod thumb (ale neodstraní soubor ze serveru)
    removedfile: function(file) { // zde volám akci pro smazání souboru ze serveru a z DB - akce se opravdu zavolá
    var name = file.name;
    $.ajax({
        type: 'POST',
        url: '../delete?file='+name,
        dataType: 'html'
    });
    var _ref;
    return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
    }
};
</script>

5. Zde se pokouším vytvořit akci pro mazání souboru a výmaz z DB (zatím se snažím rochodit samotný výmaz souboru), ale neúspěšně.

    /**
     * @param $file
     */
    public function actionDelete($file)
    {
		// zde budou kontroly zda uživatel opravdu může smazat soubor, atd.
        unlink($file); // výmaz souboru
		// zde bude výmaz souboru z DB
    }

unlink($path_to_file); potřebuje název souboru i s cestou, ale nevím jak přesně. Zkoušel jsem např.: $path_to_file = "G:workspace/master/www/www/gallery/".$file, ale napsalo to že složka/soubor neexistuje (cesta k souboru i jeho název byl správný).

Myslíte si že je to dobrý přístup? Nebo by bylo nějaké lepší řešení?

Ono se to nastavení z extension přenese do HTML kódu stránky, ale dropzonejs ho nebere v potaz.

Ja po uploadu pres Dropzone z nej ty obrazky smazu a zobrazim je pod nim. Pak je muzu jednoduse mazat, prepisovat alt, radit, vybirat defaultni atd. Pokud na to pouzijes ajax se snippetem, tak to chodi dobre.

Seznamuji se s Ajaxem a snippety. Přibližně vím jak z dropzonejs zavolat „něco“ po dokončení uploadu a přibližně vím jak se pracuje se snippety. Bohužel moc netuším co a jak zavolat, aby se snippet aktualizoval a ukázal ty soubory.

Definice Dropzone pro volání po dokončení uploadu.

Dropzone.options.myDropzone = {
    init: function () {
        this.on("complete", function (file) {
            if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                // toto se zavolá po dokončení uploadu
            }
        });
    }
};

Nemáš prosím nějakou ukázku? Nebo aspoň nějaký tip co by mě popostrčil? Díky moc

Super, tohle jsem potřeboval, díky :)

Teď vymýšlím, jak postupovat při zpracování příloh. Moje představa je zatím tato:

1. Uživatel vybere soubory (obrázky) a uploaduje na server → ty se uloží do cílové složky originálním názvem a v zápětí je přejmenuju.
2. Názvy příloh uložím do TEMP tabulky pro přílohy s nějakým společným ID, abych poznal že se jedná o jeden balík (proto abych věděl jaké přílohy zobrazit pod uploadem). Jde to rozlišit i jinak?
3. Bylo by zde tlačítko, kterým by uživatel potvrdil uploadované přílohy → tím by řekl, OK to je vše (tím by se uložily na požadované místo do DB a smazaly by se z TEMP tabulky).

Co si o tomto myslíte? Není to moc komplikované?

Super díky za tip. Nechal jsem si to trochu projít hlavou a strukturu budu mít trochu jinak, ale pomohlo mi to.

@Oli Trochu si upravuju extension pro osobní použití, konkrétně tyto 2 věci:

1) Dynamické určení namespace pro uložení souboru, takže $targetPath vypadá takto: $targetPath = $this->wwwDir . DIRECTORY_SEPARATOR . $this->path . DIRECTORY_SEPARATOR . $this->namespace;

$namespace si definuji v presenteru:

public function createComponentUploader($name)
    {
        $namespace = $this->user->identity->user_guid;

        $dropzone = $this->factory->create($namespace); // přidán vstupní parametr $namespace
        $path = $dropzone->getPath();
        $dropzone->onSuccess[] = function (DropzoneUploader $dropzoneUploader, $targetPath, $name, $suffix) {
            $values = [
                'image_name' => $name . '.' . $suffix,
				'namespace' => $namespace
            ];

            //uložení $values do DB.
        };
        return $dropzone->setPath($path);
    }

– Práci s namespace mám implementovanou a na první pohled vypadá že funguje, ale ještě musím více otestovat.

2) Při uploadu generuju náhodný GUID, kterým pak přejmenuji uploadovaný soubor. Toto jsem udělal zatím takto:

$nameNoSuffix = Strings::random(32, '0-9a-zA-Z');
$name = $nameNoSuffix. '.' . $suffix;

Bohužel Strings::random je deprecated, ale zatím ho používám, páč jsem nenašel náhradu, ale na první pohled také funguje.

Pokud by si chtěl, tak až to doladím, můžu poslat PR (V tom případě bych u bodu 2 dodělal možnost nechat i původní název dle vstupního parametru $isNameRandom = TRUE/FALSE).

Editoval Croc (17. 11. 2015 21:06)

@Croc ten namespace nemusis takhle predavat. Jestli to chapu dobre, tak muzes udelat setPath($path . '/' . $namespace). Predavat namespace me prijde zbytecny.

To nahodny jmeno souboru e mi libi, jesli to posles jako pr, tak budu rad :)

Určitě přes setter jako všechno ostatní: https://github.com/…xtension.php#…. Ono to totiž všechno můžeš nastavit globálně v configu a jen pokud chceš pro jeden konkrétní případ změnu, tak to provedeš přes ten setter.

Nechal bych náhodné generování na FALSE. To je totiž vycházející stav. Ideálně totiž aby starej kod fungoval bez zásahu stejně jako po PR.

Díky

Super, díky, kouknu na to.

To id jsem tam přidával až potom co jsem zjistil, že to nastavení z extension nejde. Přidal jsem ho tam, abych pak mohl v dané šabloně zavolat definici nastavení pro dropzone: Dropzone.options.myDropzone = {}