Multiupload s více inputama pro popisky

Tirus91

V tuto chvíli využívám doplněk MultipleFileUpload. Potřeboval bych ovšem uživatelovi nabídnout jen daný počet inputů pro vložení obrázku (také to ošetřit) tak aby se rovnou nahrávali na server a následně aby mohl uživatel k danému obrázku napsat nějaký popisek.

V tomto doplňku se mi jeví jako jediné použivatelné „plupload“. Ovšem nijak extra mi nevyhovuje.

protected function createComponentAlbumForm() {
       $form = new Form;
       $form->addProtection();
       $form->setTranslator($this->getTranslator());
       $form->addSelect('albums', 'Albums:', $this->galleryAlbumRepository->findAll()->fetchPairs('id', 'title'));
       $form->addMultipleFileUpload("files", "Images for upload:", /* max num. of files */ 10)
               ->addRule("MultipleFileUpload\MultipleFileUpload::validateFilled", "You must upload at least one file")
               ->addRule("MultipleFileUpload\MultipleFileUpload::validateFileSize", "Files you've selected are too big.", $this->gallerySettingsEntity->maxUploadedFileSize * 10); //kB
       $form->addSubmit('save', 'Save');
       $renderer = $form->getRenderer();
       $renderer->wrappers['controls']['container'] = 'div class="form-group';
       $form->onSuccess[] = $this->completeSaveSettings;
       return $form;
   }

   public function completeSaveSettings(Form $form, Nette\Utils\ArrayHash $values) {
       if ($form->isSuccess()) {
           foreach ($values->files as $key => $photo) {
               $entity = new \Tirus\Entity\GalleryPhoto;
               $entity->savePhoto($photo, $this->attachments, $this->gallerySettingsEntity);
               $entity->created = new \DateTime;
               $entity->owner = $this->getUser()->id;
               $entity->album = $values->albums;
               $this->galleryPhotoRepository->persist($entity);
           }
       }
   }

iguana007

já to řešil až custom callbackem, který se spouští po dokončeném uploadu (většina těch uploaderů něco takového má) – ajaxem potom vrátím náhled fotky + editovací form, pro popisek – ten ukládám po každém stisku klávesy, takže odpadává i submit button (není to u mne moc častá činnost, tak ty extra requesty mi nevadí). A nakonec, aby si uživatel mohl být jistý, že je soubor nahrán, tak vysílám v pravidelných intervalech mini zprávu do browseru o počtu nově uložených znaků během editace).

Tirus91

@iguana007
wow, tak to je pro mne zatím velká neznámá. Nemáš nějaký sample ze kterého bych mohl vycházet prosím?

Zda jsem to pochopil, tak by stačilo si vytvořit továrničku a tu přes multiplier několikrát zduplikovat. Pak to vše udělat pro jeden soubor tak jak říkáš. Zkusím si s tím nějak pohrát večer a uvidím. Rozhodně za nějaký sample budu i tak moc rád

/* formular bude mit vzdy v nazvu ID fotky aby se zajistila jedinecnost formulare */
return new \Nette\Application\UI\Multiplier(function($lang) {
    return $this->photoFactory->create();
});

Pro řešení jako je zde už ale musím využívat nějaký doplněk od Procházky, že?

Editoval Tirus91 (9. 9. 2014 9:04)

Tirus91

@iguana007
Tak jsem docílil multiplieru a funkčnosti jen nahrávání.

Je mi jasné, že stačí dát událost onchange na input[type=file] a následně form dát jako ajax.

Dále bych se chtěl optat jak to mám provést v té komponentě?

<?php

namespace Tirus\Gallery;

use Nette\Application\UI\Control,
    Nette\Application\UI\Form,
    Nette\Utils\ArrayHash;

class AddPhotoControl extends Control {

    /** @var \Nette\Localization\ITranslator * */
    protected $translator;

    /** @var \Tirus\Repository\GalleryAlbumRepository * */
    protected $albumRepository;

    /** @var \Tirus\Repository\GalleryPhotoRepository * */
    protected $photoRepository;

    /** @var \Tirus\Attachments\Storage * */
    protected $storage;

    /** @var \Tirus\Entity\GallerySettings * */
    protected $gallerySettings;

    /**
     * Set Translator
     * @param \Nette\Localization\ITranslator $translator
     */
    public function setTranslator(\Nette\Localization\ITranslator $translator) {
        $this->translator = $translator;
    }

    public function setGallerySettings(\Tirus\Entity\GallerySettings $gallerySettings) {
        $this->gallerySettings = $gallerySettings;
    }

    public function setPhotoRepository(\Tirus\Repository\GalleryPhotoRepository $photoRepository) {
        $this->photoRepository = $photoRepository;
    }

    public function setAlbumRepository(\Tirus\Repository\GalleryAlbumRepository $album) {
        $this->albumRepository = $album;
    }

    public function setStorage(\Tirus\Attachments\Storage $storage) {
        $this->storage = $storage;
    }

    public function render() {
        if ($this->translator instanceof \Nette\Localization\ITranslator) {
            $this->template->setTranslator($this->translator);
        }
        $template = dirname(__FILE__) . '/templates/default.latte';
        $this->template->setFile($template);
        $this->template->render();
    }

    protected function createComponentAddPhoto() {
        $form = new Form;
        $form->addProtection();
        $form->getElementPrototype()->class[] = 'ajax form-horizontal';
        if ($this->translator instanceof \Nette\Localization\ITranslator) {
            $form->setTranslator($this->translator);
        }
        $form->addSelect('albums', 'Albums:', $this->albumRepository->findAll()->fetchPairs('id', 'title'))
                ->setAttribute('class', 'form-control');
        $form->addUpload('photo', 'Photography:')
                        ->setAttribute('class', 'form-control')
                        ->getControlPrototype()->onchange[] = 'this.form.submit();';
        $form->addSubmit('save', 'Save')
                ->setHtmlId('send-button')
                ->setAttribute('class', 'btn btn-primary');
        $form->onSuccess[] = $this->completeSaveSettings;
        return $form;
    }

    public function completeSaveSettings(Form $form) {
        if ($form->isSuccess()) {
            $values = $form->getValues();
            try {
                $entity = new \Tirus\Entity\GalleryPhoto;
                $entity->savePhoto($values->photo, $this->storage, $this->gallerySettings);
                $entity->created = new \DateTime;
                $entity->owner = $this->presenter->getUser()->id;
                $entity->album = $values->albums;
                $id = $this->photoRepository->persist($entity);
                $entity = $this->photoRepository->get($id);
            } catch (\Exception $ex) {
                \Tracy\Debugger::log($ex);
                $form->addError('Cant save photo');
                return;
            }
            if (!$this->presenter->isAjax()) {
                $this->redirect('this');
            }
            $this->redrawControl('addPhotoForm');
        }
    }

}

Komponentu vypisuji zatím jen pomocí

{snippet addPhotoForm}
    {control addPhoto}
{/snippet}

Editoval Tirus91 (10. 9. 2014 13:49)