Článek vychází z anglického originálu Firefox 4 – FormData and the new File.url object, jehož autorem je Jonas Sickling a který vyšel na stránkách Mozilla Hacks pod licencí CC-BY-SA. Pod stejnou licencí je k dispozici i tento překlad.

Autor článku Jonas Sicking pracuje na zobrazovacím jádru Gecko. V článku popisuje nejen FormData, ale ukazuje i jejich napojení na důležitou část File API, které bude ve Firefoxu 4, totiž File.url.

Počínaje Firefoxem 3.6 podporuje tento prohlížeč standardizovaný způsob čtení souborů pomocí objektu  FileReader. Tento objekt umožňuje načíst data ze souboru do paměti a analyzovat jeho obsah nebo zobrazit jej uživateli. Kupříkladu lze zobrazit náhled obrázku pomocí velmi jednoduchého kódu:

var reader = new FileReader();
reader.onload = function() {
  previewImage.src = reader.result;
}
reader.readAsDataURL(myFile);

(Viz též starší článek Práce se soubory v HTML5)

Zde je zapotřebí poznamenat dvě věci. Zaprvé, reader.result je datové URL, které obsahuje kompletní obsah souboru. To znamená, že celý soubor je načten v paměti. A nejen to – datová URL jsou často kódována pomocí base64, a každý znak výsledného řetězce je uložen jako javascriptový znak (datový typ „char“), tedy zabere v paměti dva bajty. Výsledkem je, že když výše uvedený kód načte desetimegový soubor, bude reader.result řetězec, který v paměti zabere 26.7 MB.

Druhá věc je, že výše uvedený kód je poněkud komplikovaný, protože načítání souborů probíhá asynchronně a vyvolává událost po přečtení.

File.url

Ve Firefoxu 4 Beta 1 můžete namísto toho použít tento kód:

previewImage.src = myFile.url;

Tento kód využívá vlastnosti File.url, definované ve specifikaci File API. Vlastnost obsahuje krátké URL (zhruba 40 znaků). Přesný obsah tohoto URL je nedůležitý, ale pro zvídavé: obsahuje náhodně vytvořený identifikátor se speciálním prefixem pro schéma (konkrétně „moz-filedata:xxxxx…“).

Toto URL můžete následně použít všude, kde lze použít URL, a při čtení dat z tohoto URL bude prohlížeč číst přímo z daného souboru. Příklad výše způsobí, že element img bude data pro obrázek načítat přímo ze souboru. Toto nahrávání funguje úplně stejně jako načítání z http URL, fungují u nich tedy události jako load nebo error tak, jak jsme zvyklí.

Můžeme zobrazit i HTML soubor pomocí <iframe> a nastavením atributu src na hodnotu, vrácenou metodou File.url. Je nutné poznamenat, že relativní URL v takto zobrazeném HTML souboru nebudou fungovat, protože nebudou vztažené k hlavní stránce, ale k vygenerovanému zástupnému URL, vrácenému z File.url. Pokud tedy bude takto zobrazená HTML stránka obsahovat např. relativně odkázaný obrázek, nebude zobrazen. Toto chování je záměrné – uživatel totiž povolil přístup k danému HTML souboru a ne k obrázkům.

Další místa, kde lze tato URL využít, je například CSS vlastnost background-image, pomocí které můžete změnit pozadí prvků. A pokud váš kód načítá obsah souboru ze serveru pomocí XMLHttpRequest a chcete nabídnout možnost načítání lokálních souborů, můžete použít toto URL namísto přepisování kódu a použití  FileReader.

FormData

Další funkce, která je obsažena ve Firefoxu 4 Beta 1, je objekt FormData. Tento objekt využijete v případě, že máte serverový backend pro upload souborů, které využívají kódování  multipart/form-data.

Ve Firefoxu 3.6 vyžaduje posílání dat jako multipart/form-data pomocí XMLHttpRequest trochu práce navíc. Musíte použít FileReader k načtení dat do paměti, pak je ručně zakódovat jako multipart/form-data, a nakonec poslat na server. Obojí vyžaduje vlastní kód, nemluvě o nárocích, které představuje načtení celého souboru do paměti.

Ve Firefoxu 4 můžeme použít objekt FormData , který pochází ze specifikace XMLHttpRequest Level 2. Pomocí něho můžeme napsat takto čistý kód:

var fd = new FormData();
fd.append("fileField", myFile);
var xhr = new XMLHttpRequest();
xhr.open("POST", "file_handler.php");
xhr.send(fd);

Takto jednoduše bude obsah souboru zakódován pomocí multipart/form-data a poslán na server. Obsah souboru je zpracováván po malých kouscích, takže taková operace nevyžaduje žádné velké objemy paměti. Výše uvedený kód odpovídá zhruba tomuto HTML formuláři (a pošle stejná data):

<form enctype="multipart/form-data" method="post">
  <input type="file" name="fileField">
</form>

Pokud chcete poslat víc souborů, prostě přidejte fd.append pro každý soubor, který chcete odeslat, budou poslány v jednom požadavku. Samosebou můžete použít události tak, jak jste zvyklí z XMLHttpRequest, jak pro upload, tak i pro download.

Navíc nabízí FormData jednu hezkou vlastnost. Můžete jeho pomocí poslat i normální data, ne jen soubory, stejně jako to lze z HTML formulářů. Například:

var fd = new FormData();
fd.append("author", "Jonas Sicking");
fd.append("name", "New File APIs");
fd.append("attachment1", file1);
fd.append("attachment2", file2);
var xhr = new XMLHttpRequest();
xhr.open("POST", "file_handler.php");
xhr.send(fd);

Pokud v HTML nějaký formulář máte, můžete si z něj data lehce zkopírovat do nového objektu FormData. (Syntaxe se může ve finálním Firefoxu 4 ještě změnit)

var fd = myFormElement.getFormData();
var xhr = new XMLHttpRequest();
xhr.open("POST", "file_handler.php");
xhr.send(fd);

Objekt fd bude obsahovat data ze všech položek HTML formuláře, od radio buttonů až po soubory.

Dodatek k českému překladu

File.url a FormData jsou jistě zajímavé a užitečné funkce, které zjednoduší psaní velkého množství kódu u webových aplikací. Je potřeba mít na paměti, že jejich podpora teprve přichází (i když např. FormData jsou implementovány podle dostupných informací v Safari 5 a Chrome 5), specifikace není uzavřená, implementace se mohou zatím lišit a v následujících měsících (možná i letech) nebudou tyto funkce bohužel široce použitelné. Což ovšem platí pro většinu technologií z rodiny HTML5. Na druhou stranu je dobré se s možnostmi těchto API seznámit už dnes a udělat si tak plastičtější obraz o tom, kam web a jeho vývoj směřuje.