//DEVGURU

Swfupload to bardzo zgrabne połączenie flasha z javascriptem, które w efekcie daje nam mechanizm uploadu plików na serwer, który możliwościami znacznie wykracza poza standardowy <input type=”file” …/>. Podstawowe zalety, to możliwość uploadu wielu plików naraz i pokazywanie paska postępu całego procesu.

Jednak nie wszystko zawsze działa tak jak należy. Część problemów z używaniem tej biblioteki wynika z różnic pomiędzy kolejnymi wersjami Flasha lub błędów w implementacji niektórych funkcjonalności po stronie Flasha właśnie. Część z tych problemów i metod ich rozwiązania opisałem kiedyś na blogu CodeTunes, ale teraz wyszła nowa wersja Flasha – 10.

Flash 10 podchodzi trochę bardziej restrykcyjnie do niektórych aspektów bezpieczeństwa od swoich poprzedników. Jedną z takich zmian jest zablokowanie wywołania okna dialogowego do wyboru plików spoza flasha, co bezpośrednio uderza w SwfUpload, który robił to z poziomu Javascript.

Na szczęście reakcja developerów SwfUpload’a była dość szybka i rozpoczęli prace nad wersją 2.2 biblioteki, która już radzi sobie z tym problemem. Warto jednak zauważyć, że wersja 2.2, pomimo kompatybilności z Flashem 10 we wspomianym aspekcie, znajduje się jeszcze w fazie alpha, więc może mieć wciąż jakieś niedociągnięcia. Polecam więc upgrade do stabilnej wersji jak się tylko ukaże.

Poniżej instrukcja jak przekonfigurować swoją aplikację do używania SwfUpload w wersji 2.2.

Najpierw ściągamy najnowszą wersję biblioteki z SVN

svn co http://swfupload.googlecode.com/svn/swfupload/trunk/core swfupload

Z tego co sciągniemy potrzebujemy tylko dwa pliki: swfupload/swfupload.js i swfupload/Flash/swufpload.swf. Są to nowe wersje plików, które już powinniśmy mieć w swojej aplikacji, więc podmieniamy stare na nowe.

W nowej wersji SwfUpload sam sobie generuje przycisk otwierający okienko z wyborem plików, my musimy tylko wskazać mu miejsce gdzie ma go umieścić.

<div id="swfuploadButtonPlaceHolder"></div>

Pozostaje nam jeszcze tylko zmiana w opcjach z poziomu Javascript:

swfu = new SWFUpload({
...
button_placeholder_id: "swfuploadButtonPlaceHolder",
button_image_url: "../images/swfupload/button.jpg",
button_width: "216",
button_height: "25"
...});

Ścieżka do “button_image_url” musi być relatywna do lokalizacji pliku swf, a sam obrazek, na który wskazuje powinien wyglądać mniej więcej tak:

Czyli jeden obrazek zawierający 3 stany przycisku (normalny, onmouseover, onclick). Zamiast obrazka możemy podać tekst:

swfu = new SWFUpload({
...
button_text: '<span class="theFont">Upload</span>',
button_text_style: ".theFont { font-size: 16; }"
...});

To wszystko. Działający przykład można obejrzeć tutaj.