File a FileReader

Objekt třídy File je zdÄ›dÄ›n z Blob a je rozšířen o schopnosti týkající se souborového systému.

Je možné ho získat dvěma způsoby.

Prvním je konstruktor, podobnÄ› jako Blob:

new File(částiSouboru, názevSouboru, [volby])

• částiSouboru – je pole hodnot Blob/BufferSource/String.
• názevSouboru – Å™etÄ›zec s názvem souboru.
• volby – nepovinný objekt:
  • lastModified – časové razítko (celočíselné datum) poslední zmÄ›ny.

Druhým, častÄ›jším způsobem je získání souboru z <input type="file">, pÅ™etažení nebo jiného prohlížečového rozhraní. V takovém případÄ› soubor získá tyto informace z operačního systému.

Jelikož File je zdÄ›dÄ›n z Blob, objekty File mají stejné vlastnosti jako Blob a navíc:

• name – název souboru,
• lastModified – časové razítko poslední zmÄ›ny.

Tímto způsobem můžeme získat objekt File z <input type="file">:

<input type="file" onchange="zobrazSoubor(this)">

<script>
function zobrazSoubor(vstup) {
  let soubor = vstup.files[0];

  alert(`Název souboru: ${soubor.name}`); // např. my.png
  alert(`Naposledy změněn: ${soubor.lastModified}`); // např. 1552830408824
}
</script>

FileReader

FileReader je objekt, jehož jediným smyslem je načítat data z objektů Blob (a tedy i File).

Data doručuje pomocí událostí, neboť načítání z disku může nějaký čas trvat.

Konstruktor:

let reader = new FileReader(); // bez argumentů

Hlavní metody:

• readAsArrayBuffer(blob) – načte data v binárním formátu ArrayBuffer.
• readAsText(blob, [kódování]) – načte data jako textový Å™etÄ›zec se zadaným kódováním (standardnÄ› utf-8).
• readAsDataURL(blob) – načte binární data a zakóduje je do datového URL v base64.
• abort() – zruší provádÄ›nou operaci.

Volba metody read* závisí na tom, kterému formátu dáváme pÅ™ednost a jak chceme tato data použít.

• readAsArrayBuffer – pro binární soubory, pro provádÄ›ní operací nízké úrovnÄ›. Operace vysoké úrovnÄ›, napÅ™. vyjímání části dat, jsou ve File zdÄ›dÄ›ny z Blob, takže je můžeme volat rovnou bez načítání.
• readAsText – pro textové soubory, když chceme získat Å™etÄ›zec.
• readAsDataURL – kdybychom chtÄ›li použít data v src značky img nebo jiné. Pro tento účel existuje alternativa k načítání souboru, kterou jsme probrali v kapitole Blob: URL.createObjectURL(soubor).

Když načítání probíhá, nastávají tyto události:

• loadstart – načítání začalo.
• progress – nastává bÄ›hem načítání.
• load – načítání skončilo bez chyb.
• abort – voláno abort().
• error – nastala chyba.
• loadend – načítání skončilo, aÅ¥ už úspěšnÄ› nebo s chybou.

Když načítání skončilo, můžeme přistupovat k výsledku následovně:

• reader.result je výsledek (pokud skončilo úspěšnÄ›),
• reader.error je chyba (pokud selhalo).

NejčastÄ›ji používanými událostmi jsou bezpochyby load a error.

Příklad načítání souboru:

<input type="file" onchange="načtiSoubor(this)">

<script>
function načtiSoubor(vstup) {
  let soubor = vstup.files[0];

  let reader = new FileReader();

  reader.readAsText(soubor);

  reader.onload = function() {
    console.log(reader.result);
  };

  reader.onerror = function() {
    console.log(reader.error);
  };

}
</script>

Shrnutí

Objekty File jsou zdÄ›dÄ›ny z Blob.

KromÄ› metod a vlastností Blob mají objekty File i vlastnosti name a lastModified a vnitÅ™ní schopnost číst ze souborového systému. Objekty File zpravidla získáváme z uživatelského vstupu, například <input> nebo událostí pÅ™etažení (ondragend).

Objekty FileReader umÄ›jí číst ze souboru nebo blobu, a to v jednom ze tří formátů:

• ŘetÄ›zec (readAsText).
• ArrayBuffer (readAsArrayBuffer).
• Datové URL, zakódované pomocí base64 (readAsDataURL).

V mnoha případech vÅ¡ak nemusíme načíst obsah souboru. Můžeme vytvoÅ™it krátké URL voláním URL.createObjectURL(soubor) a pÅ™iÅ™adit je do <a> nebo <img>, stejnÄ› jako jsme to dÄ›lali s bloby. Tímto způsobem můžeme stáhnout soubor nebo jej zobrazit jako obrázek, jako součást plátna a podobnÄ›.

A pokud chceme poslat File po síti, je to také snadné: síťová API, napÅ™. XMLHttpRequest nebo fetch, pÅ™irozenÄ› pÅ™ijímají objekty File.