Zend Framework: integracja z Uploadify

Autor: Arkadiusz Tobiasz 1 maja 2012

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli zrobić bardziej dynamiczny upload zdjęć na naszej stronie. Ja z tego skryptu korzystam po stronie administracyjnej do uploadu zdjęć do galerii.

Na początku ściągamy skrypt Uploadify (można go pobrać stąd). Pliki z paczki umieszczamy w katalogu public/scripts/uploadify/

Teraz czas na dodanie odpowiednich plików do mojego layoutu. Edytuję plik application/layouts/scripts/layout.phml dodając na początku:

1
2
3
4
5
6
7
8
   if(!empty($this->uploadify)) {
        $this->headScript()
            ->appendFile($this->baseUrl().'/scripts/uploadify/jquery.uploadify.v2.1.4.js', 'text/javascript')
            ->appendFile($this->baseUrl().'/scripts/uploadify/swfobject.js', 'text/javascript')
            ->appendFile($this->baseUrl().'/scripts/uploadify/gallery.js', 'text/javascript');
        $this->headLink()
            ->prependStylesheet($this->baseUrl().'/scripts/uploadify/uploadify.css');
    }

Jednak, aby pliki te pojawiły się w sekcji <head><…</head> musimy umieścić, o ile tego już nie mamy poniższy fragment kodu:

1
2
3
4
5
<head>
    <?php echo $this->headLink(); ?>
    <?php echo $this->headMeta(); ?>
    <?php echo $this->headScript(); ?>
</head>

Pliku gallery.js nie ma standardowo w paczce, dlatego musimy go utworzyć:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(document).ready(function() {
    var sid = $('#sid').val();
    var album = $('#album_id').val();
    var baseurl = 'http://www.strona.pl';
    $('#album_id').change(function() {
        album = $(this).val();
    });
    $('#photos-upload').uploadify({
        'uploader'          : '../../scripts/uploadify/uploadify.swf',
        'script'            : baseurl + '/gallery/upload-photo',
        'cancelImg'         : '../../scripts/uploadify/cancel.png',
        'folder'            : '../../uploads/gallery/',
        'scriptAccess'      : 'always',
        'auto'              : true,
        'multi'             : true,
        'fileExt'           : '*.jpg;*.gif;*.png',
        'fileDesc'          : 'Pliki graficzne',
        'queueID'           : 'photos-queue',
        'removeCompleted'   : true,
        'buttonText'        : 'Wybierz',
        'scriptData'        : { 'sid' : sid, 'album_id' : album },
        'onError'           : function (event, queueID ,fileObj, errorObj) {
            alert(errorObj.info);
        },
        'onSelectOnce' : function(event,data) {
            album = $('#album_id option:selected').val();
            $("#photos-upload").uploadifySettings('scriptData', {'sid' : sid, 'album_id' : album});
        }
  });
});

Pamiętaj, aby ustawić zmienną baseurl na adres swojej strony. Pliki będą umieszczane w katalogu public/uploads/gallery

Przejdźmy teraz do kontrolera, który będzie odpowiedzialny za dodawanie naszych zdjęć. Mój kontroler nazywa się GalleryController.php, a akcja odpowiedzialna za dodawanie zdjęć nazywa się addPhotosAction()

1
2
3
4
5
6
7
8
9
public function addPhotosAction()
    {
        $this->view->uploadify = true;
       
        $albums = new Application_Model_GalleryAlbums();
        $this->view->albums = $albums->getAlbums('album_upload=1', 'album_publish_date DESC');
       
        $this->view->sid = Zend_Session::getId();
    }

Zmienną $this->view->uploadify ustawiam na true, aby w nagłówku strony pojawiły się pliki skryptu Uploadify. Następnie pobieram albumy z bazy danych, które mają włączoną opcję uploadu. Ostatnia rzecz to ustawienie id sesji, jest to wymagane, aby Uploadify działało poprawnie!

W naszym pliku Bootstrap.php musimy zainicjować naszą sesję:

1
2
3
4
5
6
7
8
    protected function _initSession()
    {
        if (isset($_POST['sid'])) {
            Zend_Session::setId($_POST['sid']);
        }

        Zend_Session::start();
    }

Teraz czas na plik widoku application/views/scripts/gallery/add-photos.phtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<dl class="zend_form">
        <dt id="album-label"><label for="album_id" class="required">Album: *</label></dt>
        <dd id="album-element">
            <input type="hidden" id="sid" name="sid" value="<?php echo $this->sid; ?>" />
            <select name="album_id" id="album_id">
                <?php
                foreach($this->albums as $album) :
                    echo '<option value="'.$album->album_id.'">'.$album->album_title.'</option>';
                endforeach; ?>
            </select>
        </dd>
        <dt id="photos-label"><label for="photos" class="required">Zdjęcia: *</label></dt>
        <dd id="photos-element">
            <div id="status-message"></div>
            <div id="photos-queue"></div>
            <div id="photos-upload"></div>
        </dd>
    </dl>

W naszym kontrolerze musimy stworzyć kolejna akcję, która będzie zapisywać pliki na naszym serwerze. Nazwę ją uploadPhotoAction() a jej zawartość wygląda tak:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    public function uploadPhotoAction()
    {
       
        $this->_helper->layout()->disableLayout();
        if (!empty($_FILES['Filedata'])) {
            $temp_file = $_FILES['Filedata']['tmp_name'];
            $path = realpath(APPLICATION_PATH . '/../public/uploads/gallery').'/'.$_REQUEST['album_id'];
            $file =  $_FILES['Filedata']['name'];
            $ext = end(explode('.', $file));
            $filename = md5(time()).'.'.$ext;
            move_uploaded_file($temp_file, $path.'/'.$filename);
            $this->view->filename = $filename;
        }
       
    }

Najpierw blokujemy wyświetlanie layotu. Następnie sprawdzamy czy istnieje nasz plik, jeżeli tak to zmieniam nazwę pliku (chcę uniknąć konfliktu nazwy) i przenoszę go pod nową nazwę. Uwaga: lubię porządek, dlatego w katalogu public/uploads/gallery tworzę najpierw katalog o nazwie, którą jest id albumu dodanego wcześniej. W tym tutorialu nie pokazuję jak tworzę albumy, więc jeżeli chcesz wrzucić wszystkie pliki do jednego katalogu usuń z powyższego kodu fragment

1
.'/'.$_REQUEST['album_id']

Ostatnia rzecz do zrobienia to widok naszej akcji application/views/scripts/gallery/upload-photo.html

1
<?php echo $this->filename; ?>

Na ekranie umieszczamy nazwę naszego pliku. To by było na tyle 🙂

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]