README

Resumable chunked file upload UI Control pro Nette Framework.

• Drag & drop zóna s fallbackem na klik, plně přístupná klávesnicí
• Resumable upload — přerušený přenos pokračuje od posledního odeslaného chunku
• Progress bar celkového postupu fronty + inline progress bar aktivního souboru
• Fronta souborů, která po dokončení položky vyfaduje
• Frontendové události pu:uploaded, pu:allUploaded, pu:progress na document
• Témata Bootstrap 5, Tailwind CSS nebo vlastní mapa CSS tříd
• PHP událost onUploaded pro uložení metadat do DB
• Plně lokalizovatelné texty přes setTexts()

Požadavky

Instalace

composer require phloxcz/components-upload

Quickstart

1. Registrace factory v config.neon

services:
    - implement: Phlox\Components\Upload\UploadControlFactory

2. Komponenta v presenteru

use Phlox\Components\Upload\UploadControl;
use Phlox\Components\Upload\UploadControlFactory;

class FilePresenter extends Nette\Application\UI\Presenter
{
    public function __construct(
        private readonly UploadControlFactory $uploadFactory,
        private readonly FileRepository $fileRepository,
    ) {}

    protected function createComponentUpload(): UploadControl
    {
        $upload = $this->uploadFactory->create('/var/storage/uploads');

        $upload
            ->setChunkSize(2 * 1024 * 1024)
            ->setMultiple(true)
            ->setMaxFileSize(100 * 1024 * 1024)
            ->setTheme(UploadControl::THEME_BOOTSTRAP);

        $upload->onUploaded[] = function (array $fileInfo): void {
            $this->fileRepository->save([
                'original_name' => $fileInfo['originalName'],
                'stored_name'   => $fileInfo['storedName'],
                'path'          => $fileInfo['path'],
                'size'          => $fileInfo['size'],
                'mime_type'     => $fileInfo['mimeType'],
            ]);
        };

        return $upload;
    }
}

3. Šablona

{control upload}

4. Assets

// app.js
import 'vendor/phloxcz/components-upload/assets/upload-control.css';
import 'vendor/phloxcz/components-upload/assets/upload-control.js';

Dokumentace

Podrobná dokumentace je v adresáři docs/:

• Konfigurace
• Témata a stylování
• Lokalizace textů
• PHP události
• Frontendové události
• Resumable upload
• DI Extension
• Bezpečnost