MultiUpload – rozšíření JS?

Zdravím,

už jsem zde pokládal podobnou otázku na kterou zatím neznám odpověď.

Přes composer jsem si stáhnul jkuchar/multiplefileupload a vše zprovoznil.
Bohužel jsem obdržel Toto ,ale potřeboval bych "Tuto ":https://www.youtube.com/watch?… funkčnost

• Buďto bych chtěl nastavit jkuchar/multiplefileupload, aby fungoval jako klasický multiupload → tedy jedno tlačítko pro vybrání souborů a v okně filesystemu si vybrat 1 až 20 fotek a nevim zda to jde bez použití JS
• Implementovat Uploadify nebo "Plupload ":http://www.plupload.com/examples nebo Fine Uploader
• bylo by dobré kdyby se to dalo implementovat na již přidaný jkuchar/multiplefileupload
• ptám se jelikož zde na foru jsou příspěvky starší 2 let
• jaká je nejlepší možnost ? a co použít

bootstrap.php

// Setup MultipleFileUpload
MultipleFileUpload\MultipleFileUpload::register();

GalleryPresenter.php

class GalleryPresenter extends ProtectedPresenter {

    /** @var Nette\Database\Context */
    private $database;

    /** @var ImageStorage */
    private $imageStorage;

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

    public function renderDefault() {

    }

    public function handleRenderGalleryAdd(array $gallery_data) {
        if ($this->isAjax()) {

            // Insert new gallery to DB

            // Vrať Last ID a vytvoř novou složku podle právě přidané galerie

            // Create gallery folder

        }
    }

    public function handleRenderGalleryDelete(array $gallery_data) {
        if ($this->isAjax()) {

            }
            $this->redrawControl('galleryList');
        }
    }

    public function injectImages(\App\Model\ImageStorage $storage) {
        $this->imageStorage = $storage;
    }

    public function renderShow($gid) {

    }

    /**
     * Returns array of suggestions
     */
    public function checkConfiguration() {

        $www = $this->context->expand("%wwwDir%");
        $publicMFUDir = $www . "/MultipleFileUpload/";
        $jsDir = $www . "/js/";
        $messages = array();

        if (!file_exists($publicMFUDir)) {
            $messages[] = "Directory \"www/MultipleFileUpload\" not found! Copy or link content of \"libs/jkuchar/MultipleFileUpload/public\" folder to \"www/MultipleFileUpload\".";
        };

        if (!file_exists($publicMFUDir . "MFUFallbackController.js")) {
            $messages[] = "File MFUFallbackController.js is missing! Is should be in www/MultipleFileUpload. MFU can't work without this file.";
        };

        if (!file_exists($jsDir)) {
            $messages[] = "WARNING: Directory \"www/js\" not found! (trying to check, if jQuery is properly installed)";
        }

        if (!file_exists($jsDir . "jquery.js")) {
            $messages[] = "WARNING: File jquery.js not found! MultipleFileUpload does not work corectly without jQuery.";
        }

        if (!file_exists($jsDir . "nette.ajax.js")) {
            $messages[] = "WARNING: File nette.ajax.js not found! This is needed if you want to use AJAX. (https://componette.org/search/?q=vojtech-dobes%2Fnette-ajax-js)";
        }

        if (!file_exists($jsDir . "netteForms.js")) {
            $messages[] = "WARNING: File netteForms.js not found! This is needed if you want validation of forms.";
        }

        return $messages;
    }

    public function createComponentForm($name) {
        $form = new Form($this, $name);
        $form->getElementPrototype()->class[] = "ajax"; // activate AJAX in https://componette.org/search/?q=vojtech-dobes%2Fnette-ajax-js
//        $form->addText("textField", "Text field")
//                ->addRule(Form::FILLED, "This is required text field.");
        $form->addMultipleFileUpload("upload", "Attachments")
        ->addRule('MultipleFileUpload\MultipleFileUpload::validateFilled',"You have to upload at least one file!");
//        ->addRule('MultipleFileUpload\MultipleFileUpload::validateFileSize',"Files are together too large.",100*1024);
//        $form->addMultipleFileUpload("upload2","Second file uploader");
        $form->addSubmit("send", "Submit your form!");
        $form->onSuccess[] = $this->handleFormSuccess;

        // Invalidace snippetů
        $form->onError[] = array($this, "handleRedrawForm");
        $form->onSuccess[] = array($this, "handleRedrawForm");
    }

    public function handleFormSuccess(Form $form) {
        $data = $form->getValues();
        // Let's pass our data to template
        $this->template->values = $data;
        $queueId = uniqid();
        // Moving uploaded files
        foreach ($data["upload"] AS $file) {
            // $file je instance HttpUploadedFile
            var_dump($file); exit();
            $newFilePath = \Nette\Environment::expand("%appDir%") . "/../img_gallery/q{" . $queueId . "}__f{" . rand(10, 99) . "}__" . $file->getName();
            // V produkčním módu nepřesunujeme soubory...
            if (!\Nette\Environment::isProduction()) {
                if ($file->move($newFilePath))
                    $this->flashMessage("File " . $file->getName() . " was successfully moved!");
                else
                    $this->flashMessage("Error while moving file " . $file->getName() . ".");
            }
        }
    }

    public function handleRedrawForm() {
        // This invalidates snippet
        // on AJAX requests this causes redrawing of the form

        $this->invalidateControl("form");
    }

    public function renderAdd($gid) {

    }

}

templates/gallery/add.latte

{block content}
<div class="row">
    <div class="col-sm-12">
        <div class="container-fluid">

            <!-- Page Heading -->
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">
                        Galerie
                        <small>Seznam galerií</small>
                    </h1>
                    <ol class="breadcrumb">
                        <li>
                            <i class="fa fa-photo"></i>  Galerie
                        </li>
                        <li class="active">
                            <i class="fa fa-plus"></i> Přidání
                        </li>
                    </ol>
                </div>
            </div>
            <!-- /.row -->

            {form form}
                <ul class=error n:if="$form->errors">
                    <li n:foreach="$form->errors as $error">{$error}</li>
                </ul>

                <table>
                    <tr n:foreach="$form->controls as $input" n:class="$input->required ? required">
                        <th>{if $input->controlPrototype->type !== checkbox}{label $input /}{/if}</th>
                        <td>{input $input} {if $input->controlPrototype->type === checkbox}{label $input /}{/if}
                            <span class=error n:if="$input->errors">{$input->errors|implode:' '}</span>
                        </td>
                    </tr>
                </table>
            {/form}

        </div>
    </div>
</div>
{/block}

{block scripts}
{include parent}
<script src="{$basePath}/js/jquery-ui.min.js"></script>
<script src="{$basePath}/js/jquery.quicksearch.js"></script>
{/block}

{block head}
<link rel="stylesheet" href="{$basePath}/css/jquery-ui.min.css">
<link rel="stylesheet" href="{$basePath}/css/jquery-ui.structure.min.css">
<link rel="stylesheet" href="{$basePath}/css/jquery-ui.theme.min.css">
{/block}