DropzoneUploader – hromadný upload souborů nejen pomocí FTP

před 4 měsíci

ali
Člen | 220
+
+3
-

DropzoneUploader

Nedávno jsem potřeboval vyřešit hromadný upload souborů na FTP server a zaujala mě knihovna DropzoneJs, takže jsem si pro ní napsal tuhle tu jednoduchou komponentu, kterou naleznete na GitHubu nebo v senzačním Componette.

  • komponenta je určena pro PHP 7.1, Nette Framework 2.4/3.0 a DropzoneJs 5
  • komponentu jsem se snažil napsat univerzálně, aby šel do budoucna změnit styl nahravání souborů, takže pokud by někomu nevyhovoval FTP upload nebo klasický Nette\Http\UploadFile::move(), tak si jde jednoduše dopsat vlastní driver pro nahravání
  • jednoduché nastavení pomocí konfiguračního souboru NEON
extensions:
    webloader: AlesWita\DropzoneUploader\Extension

dropzoneuploader:
    dropzoneTemplate: ::constant(AlesWita\DropzoneUploader\Factory::BOOTSTRAP_V4_TEMPLATE)
    uploadDriver:
        driver: AlesWita\DropzoneUploader\UploadDriver\Ftp
        settings:
            url: ftp://user:password@my-ftp.cz
    settings:
        maxFilesize: 1mb
        acceptedFiles:
            - application/vnd.ms-excel
            - application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
        addRemoveLinks: true
    messages:
        dictDefaultMessage: 'Drag & drop files!'
  • k dispozici je defaultní template a template pro Bootstrap v4
  • možnost vykreslení komponenty na části
{control dropzoneUploader:js}
{control dropzoneUploader:form}
{control dropzoneUploader:files}
$.nette.ext({
 load: function(xhr, settings) {
  {control dropzoneUploader:js}
  Dropzone.discover();
 },
});
$.nette.init();
  • zobrazení již uploadnutých souborů na serveru
  • možnost stáhnout uploadnuté soubory
  • možnost smazat uploadnuté soubory
  • díky callbacku onBeginning, lze měnit dynamicky cestu k nahrávaným souborům
protected function createComponentDropzoneUploader(): AlesWita\DropzoneUploader\DropzoneUploader {
    $uploader = $this->dropzoneFactory->getDropzoneUploader();

    $uploader->onBeginning[] = function (AlesWita\DropzoneUploader\DropzoneUploader $uploader): void {
        $uploader->setFolder('tady');
    };

    return $uploader;
}
  • momentálně dostupné pouze v dev-master větvi, stable by měla být do konce měsíce
TODO
  • Move upload driver nezobrazuje již nahrané soubory 
  • dopsat testy pro FTP driver
  • Bootstrap v3 template (nepoužívám, tak klidně uvítám PR)

Editoval ali (29. 8. 21:12)

před 4 měsíci

ali
Člen | 220
+
+1
-

Update (26.6.2017)

  • vsechny casti komponenty lze vyrenderovat na casti
{control dropzoneUploader:js}
{control dropzoneUploader:form}
{control dropzoneUploader:files}
  • takze lze JS vlozit do hlavicky stranky a z-ajaxovat pomoci nette.ajax.js
$.nette.ext({
 load: function(xhr, settings) {
  {control dropzoneUploader:js}
  Dropzone.discover();
 },
});
$.nette.init();
  • nyni po opetovnem zobrazeni komponenty, se nactou jiz uploadnute soubory, ktere lze i zpetne smazat

Editoval ali (27. 6. 6:20)

před 4 měsíci

ali
Člen | 220
+
0
-

Update (30.6.2017)

Tak jak jsem slibil, tak jsem vydal stable verzi

Editoval ali (30. 6. 7:16)

před 8 dny

pavel81
Člen | 37
+
0
-

zdravím, jak prosím, nastavuje v configu upload do složky?? Lama-pavel

Editoval pavel81 (12. 10. 16:50)

před 8 dny

pavel81
Člen | 37
+
0
-

mimochodem, to vypadá, jako velice dobrá componenta. Jen to asi bude potřeba mixnout s nějakým upload managerem

před 8 dny

ali
Člen | 220
+
0
-

Takhle:

dropzoneUploader:
    ...
    uploadDriver:
        driver: AlesWita\DropzoneUploader\UploadDriver\Move
        settings:
            dir: my_dir
    ...

Editoval ali (12. 10. 17:39)

před 8 dny

pavel81
Člen | 37
+
0
-

jj, to jsem už viděl. Toto bude tedy úplně postačovat :) A ve scriptu si jednoduše nastavím složku pro ukládání? Vyzkouším to, díky za pomoc :) Pavel
Píšu někdy asi nesmyly, my_dir je zřejmě název mé složky :)

Editoval pavel81 (12. 10. 20:02)

před 8 dny

ali
Člen | 220
+
0
-

Jo, presneji v callbacku onBegining

před 8 dny

pavel81
Člen | 37
+
0
-

onBegining jsem našel v presenteru a vložil tedy název složky. Nicméně mi to stále vypisuje, že musím nastavit upload driver?? Nevím
Upload driver must be set!

před 8 dny

ali
Člen | 220
+
0
-

Tady mas ukazku configu, jak by mel vypadat, podle toho by to melo normalne fungovat.

Editoval ali (12. 10. 21:29)

před 8 dny

pavel81
Člen | 37
+
0
-

jj, super. Zatím to vypadá dobře :) Díky moc :)
Pavel

před 8 dny

pavel81
Člen | 37
+
0
-

ještě budu muset upravit něco v presenteru, ale zdá se že to už jede bez problémů :) děkuji :)