Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

HTML5: File, File Writer i FileSystem API

Autor: Piotr Karpiuk o sobota 27. Sierpień 2011

Przedmiotem dzisiejszego posta jest wchodzące w skład HTML5 API dzięki któremu JavaScript może w przeglądarce operować na plikach lokalnych, co można wykorzystać do tworzenia cache’y i danych offline na użytek aplikacji (np. baza emaili w webowym kliencie poczty, dostępna nawet po utracie połączenia z Internetem). Póki co API zaimplementowane jest w Google Chrome 9+, a jego podstawy (File API) w Firefox 3.6.3+.

Czytelnik obeznany z obsługą AJAXa (zwłaszcza w najnowszej, drugiej wersji) odnajdzie się tu bez trudu, ponieważ sposób wykonywania operacji I/O jest bliźniaczo podobny jak w XMLHttpRequest2. Tu również mamy do dyspozycji zdarzenia które pozwalają nam monitorować przebieg operacji (obsługując je możemy np. uaktualniać pasek postępu), podobnie jak mamy do wyboru tryb asynchroniczny i synchroniczny (ten drugi z przeznaczeniem dla osobnych wątków – WebWorkers). Zawartość pliku możemy traktować jako łańcuch, Data URL, blob, lub ArrayBuffer. Data URL to (w uproszczeniu) łańcuch reprezentujący tablicę bajtów w Base64 – można go użyć w HTMLowym img.src (czyli jako źródło danych wyświetlanego obrazka). Dwa ostatnie typy danych zostały wprowadzone ponieważ sam JavaScript nie udostępnia typu całkowitoliczbowego ani wydajnej implementacji tablicy bajtów, przy czym ArrayBuffer reprezentuje bufor danych na potrzeby WebGL.

File

File API pozwala reprezentować w przeglądarce plik, jak również uzyskać dostęp do metadanych plików lokalnych wybranych w formularzu przez użytkownika, oraz dostęp do danych zawartych w plikach (odczyt). Istotna nowinka znacząco poprawiająca doznania Internautów: teraz w kontrolce wyboru pliku dzięki atrybutowi multiple użytkownik może wybrać wiele plików naraz, a dzięki webkitdirectory nawet cały katalog. Może też przeciągać pliki z pulpitu do formularza na stronie WWW i odwrotnie. Po wyborze plików, a przed wysłaniem ich do serwera, z poziomu JavaScriptu możemy ustalić dla każdego z nich nazwę, rozmiar, typ MIME, datę ostatniej modyfikacji itp., a także wczytać zawartość pliku do przeglądarki. Dzięki temu możemy np. już w przeglądarce stwierdzić że plik jest zbyt duży aby przesyłać go na serwer, wyświetlić podgląd obrazka (ang. thumbnail), ewentualnie zapisać zawartość pliku w systemie plików zarezerwowanym dla aplikacji webowej (patrz FileSystem API dalej) tak aby była dostępna offline gdy nie ma dostępu do Internetu itd.

File Writer i FileSystem

Przykład zastosowania FileSystem API. Przeciągnij z pulpitu plik na tę konsolę aby zapisać plik w piaskownicy. Polecenie help wyświetla dostępne polecenia.

Ten interfejs pozwala aplikacji webowej tworzyć, czytać, nawigować i pisać do struktury katalogów w zarezerwowanym przez aplikację bezpiecznym fragmencie lokalnego systemu plików (piaskownicy). Rezerwacja przestrzeni (lub zmiana jej rozmiaru) będzie wymagać akceptacji użytkownika (okienko dialogowe). Należy tu stanowczo podkreślić, że z poziomu JavaScriptu nie ma dostępu do piaskownic innych aplikacji webowych ani tym bardziej do dowolnych plików na dysku twardym klienta (np. folderu Dokumenty czy Pobrane). Mamy też do dyspozycji nowy schemat URL, filesystem: którego możemy używać w HTMLowych img.src czy a.href.

Podsumowanie

Poniżej tabelka przedstawiająca najważniejsze klasy w każdym z omawianych interfejsów. Gorąco polecam wymienione w ramce dwa tutoriale z gotowymi przykładami do poklikania – w poście zdecydowałem się nie podawać fragmentów kodu JavaScriptu aby nie stracić na zwięzłości.

File API (Chrome 6+, Firefox 3.6+)
FileList Sequence, which represents an array of individually selected files from the underlying system. The user interface for selection can be invoked via <input type="file">
Blob Represents raw binary data, and allows access to ranges of bytes within the Blob object.
File Includes readonly informational attributes about a file such as its name, its mediatype, and a URL to access its data.
FileReader Interface, which provides methods to read a File, and an event model to obtain the results of these reads.
FileError/FileException Define error conditions used by this specification.
File Writer API (Chrome 9+)
BlobBuilder Enables one to build a Blob from a String.
FileSaver Provides methods to write a Blob to a file, and an event model to monitor the progress of those writes.
FileWriter Expands on FileSaver to add a richer set of output options.
FileSystem API (Chrome 9+)
DirectoryReader Lets a user list files and directories in a directory.
FileSystem Represents a file system.
FileEntry Represents a file on a file system.
DirectoryEntry Represents a directory on a file system.
Share and Enjoy:
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Śledzik
  • Blip
  • Blogger.com
  • Gadu-Gadu Live
  • LinkedIn
  • MySpace
  • Wykop

Zostaw komentarz

XHTML: Możesz użyć następujących tagów: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>