Multiple file upload for Nette framework via HTML5 FormData (Ajax).

default.latte

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="{$basePath}/js/nette.ajax/nette.ajax.js"></script>
<script>
    $(function () {
        $.nette.init();
        // And you fly...
    });

    function processImages() {
        $('#bar-inner').css('width', '0%');
        $('#bar').show();

        var files = document.getElementById('files-input').files;

        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var oMyForm = new FormData();
            var oReq = new XMLHttpRequest();

            oMyForm.append("file", file);

            oReq.open("POST", {link add!}, true);
            oReq.setRequestHeader("X-Requested-With", "XMLHttpRequest");
            oReq.addEventListener("progress", updateProgress, false);
            oReq.addEventListener("load", transferComplete, false);

            oReq.send(oMyForm);
        }
    }

    function updateProgress(oEvent) {
        if (oEvent.lengthComputable) {
            var percentComplete = oEvent.loaded / oEvent.total;
            $('#bar-inner').css('width', percentComplete + '%');
        }
    }

    function transferComplete(oEvent) {
        $('#bar-inner').css('width', '100%');
        console.log(oEvent.target.response);

        $.nette.ajax( {link refresh!} );
        $('#files-input').val('');
        //$('#bar').hide();
    }

    function clearBar() {
        $('#bar').hide();
        $('#files-input').val('');
    }
</script>
<div class="row">
    <div class="span5">
        <input type="file" name="files-input" id="files-input" multiple="">
        <a onclick="processImages()" class="btn btn-primary ajax">Upload</a>
    </div>
    <div class="span5">
        <div class="progress progress-striped" id="bar">
            <div class="bar-inner" id="bar-inner" style="width: 0%;"></div>
        </div>
    </div>
    <div class="span2">
        <a class="btn btn-danger" n:href="deleteAll!"><i class="icon-trash icon-white"></i> Smazat vše</a>
    </div>
</div>

<div class="row-fluid">
    <table class="table table-striped table-bordered">
        <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Size</th>
            <th>Řadit</th>
			<th>Editovat</th>
            <th>Smazat</th>
        </tr>
        </thead>
        <tbody n:snippet="files">
        <tr n:foreach="$files as $file">
            <td><img src="{$file['thumbnail_url']}"/></td>
            <td><a href="{$file['url']}">{$file['name']}</a></td>
            <td>{$file['size']|bytes}</td>
            <td>
                <div class="btn-group"><a class="btn"><i class="icon-chevron-down"></i></a><a class="btn"><i
                        class="icon-chevron-up"></i></a></div>
            </td>
			<td><a class="btn"><i class="icon-pencil"></i></a></td>
            <td><a class="btn btn-danger" n:href="delete! $file['name']"><i class="icon-trash icon-white"></i></a></td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Size</th>
            <th>Řadit</th>
            <th>Editovat</th>
            <th>Smazat</th>
        </tr>
        </tfoot>
    </table>
</div>

HomepagePresenter.php

<?php

/**
 * Homepage presenter.
 */
class HomepagePresenter extends BasePresenter
{
    public function handleProcessImages()
    {
        $files = $this->getHttpRequest()->getFiles();

        $filesNames = array();

        foreach($files as $file) {
            if( $file->isOk() and $file->isImage() ) {

                $imageName = $file->getSanitizedName();

                $file->move(__DIR__ . '/../../temp/files/' . $imageName);

                $filesNames[] = $imageName;
            }
        }

        $this->payload->pics = $imageName;
        $this->sendPayload();
    }
}

TODO: Progress https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress