instalace Uploadify v Nette

Pokud se rozhodnete napojit do Nette Uploadify, tak se můžete setkat hned s několika problémy. Tyto problémy se vám pokusím objasnit a doufám, že vám tak usnadním drahocenný čas:-)

  1. problém může nastat,  že se vám nezobrazí button pro nahrávání.
    Tento problém nastává proto, že jsou špatně nastaveny cesty. Většinou by asi každý napsal něco takového:

            $(document).ready(function() {
              $('#' + {$control['addProduct']['file_upload']->htmlId}).uploadify({
                'uploader'  : '{$basePath}/admin_www/js/uploadify/uploadify.swf',
                'script'    : '{link uploadPictures!}',
                'cancelImg' : '{$basePath}/admin_www/js/uploadify/cancel.png',
                'folder'    : '{$basePath}/files/uploads',
              });
            });

    Tyto cesty jsou neplatné, protože se vypíše:

    $(document).ready(function() {
              $('#' + {$control['addProduct']['file_upload']->htmlId}).uploadify({          
                'uploader'  : '"\/shop\/www"/admin_www/js/uploadify/uploadify.swf',
                'script'    : '"\/shop\/www\/admin\/product\/add?do=uploadPictures"',
                'cancelImg' : '"\/shop\/www"/admin_www/js/uploadify/cancel.png',
                'folder'    : '"\/shop\/www"/files/uploads',
              });
            });

    aby cesty fungovali,  je třeba kód napsat takto:

    $(document).ready(function() {
              $('#' + {$control['addProduct']['file_upload']->htmlId}).uploadify({           
                'uploader'  : {$basePath} + '/admin_www/js/uploadify/uploadify.swf',
                'script'    : {link uploadPictures!},
                'cancelImg' : {$basePath} + '/admin_www/js/uploadify/cancel.png',
                'folder'    : {$basePath} + '/files/uploads',
              });
            });
  2. problém je HTTP error při pokusu o upload.
    Tento problém je způsoben tím, že flash volá na presenter, který je zpřístupněn pouze přihlášeným uživatelům s danými právy. Řešení jsem nalezl v tomuto příspěvku na Nette fóru.
    řešení cituji od Acnnaira:
    index.php se upraví:

    if(isset($_REQUEST[session_name()])) {
            $_COOKIE[session_name()] = $_REQUEST[session_name()];
    }

    a uploadify

    $(document).ready(function() {
              $('#' + {$control['addProduct']['file_upload']->htmlId}).uploadify({
                'uploader'  : '{!$basePath}/admin_www/js/uploadify/uploadify.swf',
                'script'    : {link uploadPictures!},
                'cancelImg' : {$basePath} + '/admin_www/js/uploadify/cancel.png',
                'folder'    : {$basePath} + '/files/uploads',
                'scriptData': {
                    {=session_name()}: {=session_id()},
                              },
              });
            });
  3. problém může nastat, pokud chcete při akci onCancel, například smazat nahraný soubor.
    v dokumentaci je přímo uvedena ukázka:

      'onCancel'    : function(event,ID,fileObj,data) {
          alert('The upload of ' + fileObj.name + ' has been canceled!');
        }
    });

    která bohužel nefunguje, protože fileObj vrací null.
    Proto je to třeba nějakým způsobem obejít. Já to řešil tak, že jsem si vytvořil pole name a do něj při akci onComplete, uložil hodnotu fileObj.name, která zde funguje.
    výsledný kód může vypadat následovně:

    $(document).ready(function() {
              var name = new Array();
    
              $('#' + {$control['addProduct']['file_upload']->htmlId}).uploadify({
                'uploader'  : '{!$basePath}/admin_www/js/uploadify/uploadify.swf',
                'script'    : {link uploadPictures!},
                'cancelImg' : {$basePath} + '/admin_www/js/uploadify/cancel.png',
                'folder'    : {$basePath} + '/files/uploads',
                'buttonImg' : {$basePath} + '/admin_www/js/uploadify/button.png',
                'fileExt'   : '*.jpg;*.gif;*.png',
                'fileDesc'  : 'Web Image Files (.JPG, .GIF, .PNG)',
                'height'    : 36,
                'width'     : 131,
                'multi'     : true,
                'queueID'   : 'custom-queue',
                'removeCompleted' : false,
                'scriptData': {
                    {=session_name()}: {=session_id()},
                    'tempFolder'     : {$tempFolder}
                              },
                'onComplete': function(event, ID, fileObj, response, data)  {
                    name[ID] = fileObj.name;
                },
                'onCancel' : function(event, ID, fileObj, response, data){
                    $.post({link unlink!}, {
                        name       :  name[ID],
                        tempFolder : {$tempFolder}
                    });
                }
              });
            });
Označeno v Nette
3 komentáře “instalace Uploadify v Nette
  1. Jakub Jarabica napsal:

    Pekné, len drobnosti: {!$basePath} by som zamenil za {$basePath} + ‚/admin_www/…‘ – pre istotu.

    Pokiaľ je JS inline, tak toto: $(‚#frmaddProduct-file_upload’).uploadify riešim takto: $(‚#‘ + {$control['addProduct']['file_upload']->htmlId}).uploadify – dynamicky ťahať ID controlu rovno z Nette.

    • Jan Matoušek napsal:

      děkuji za komentář
      řešit takto basePatch bude určitě lepší, zrovna jsem to u sebe předělal a chtěl zde upravit.
      A děkuji za typ na $control['addProduct']['file_upload']->htmlId. Člověk se má stále co učit:-)

      PS: s dovolením jsem článek podle námětů poupravil

  2. Eda napsal:

    Zdar.

    Další problém může být typu: „Po kliku na v pořádku zobrazený button se nezobrazí okno pro výběr souboru“. Je to zřejmě způsobeno tím, že některá z cest v konfiguraci uploadify je na jiné doméně (pozor, stačí i jiná subdoména a nebude to fungovat). Řešením je tedy zařídit, aby swf, soubor s obrázkem pro cancel i samotná stránka byly na stejné doméně.

    Třeba to někomu pomůže :-)

    Eda

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

*

Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">

O AUTOROVI BLOGU

Jmenuji se Jan Matoušek a jsem vývojář webových aplikacích.

Mé portfolio