Benutzer:Rolf b/Dateiverarbeitung

Im Laufe der Zeit hat es viele Ansätze gegeben, die von Webseiten benötigten Daten lokal speichern zu können und Dateien vom Computer des Benutzers in JavaScript verfügbar zu machen.

Der naivste dieser Ansätze war wohl das FileSystemObject, das sich im Internet Explorer als ActiveX Komponente verwenden ließ und womit die Festplatte des Benutzers bösartigen Scripten ausgeliefert war. Eine eher hilflose Warnmeldung, dass jemand ein ActiveX Objekt erstellen möchte, war alles, was der Internet Explorer „zur Sicherheit“ vorschaltete. Mit dem Ende des Internet Explorers ist auch das Ende von ActiveX-Objekten gekommen, und damit ist das FileSystemObject im Browser irrelevant geworden.

File API

Andere Browser haben ActiveX und damit das FileSystemObject nie angeboten. Der erste sinnvolle Ansatz war das File API, womit sich auf Dateien zugreifen lässt, die in einem <input type="file"> ausgewählt wurden. Diese Dateien werden als File-Objekte bereitgestellt, die eine erweiterte Form von Blobs sind. Die Blob-Zugriffsmethoden sind damit auch für Files verfügbar.

Zugehörige Artikel:

JavaScript-Objekte

• Blob
• File
• FileReader
• FileReaderSync

Ergänzungen anderer Objekte

• URL.createObjectURL
• URL.revokeObjectURL

Beispiele

• File Upload mit Bildvorschau

File and Directory Entries API

Eine erweiterte Form des File API ist das File and Directory Entries API, das ursprünglich als „File System API“ dazu gedacht war, ein vollständiges Dateisystem in einer abgesicherten Umgebung („Sandbox“) bereitzustellen, um Daten auf der Festplatte des Anwenders abzulegen. Es handelte sich dabei allerdings mehr oder weniger um einen Alleingang von Chrome, der von Firefox nicht mitgemacht wurde. Die Standardisierungsversuche sind 2012 aufgegeben worden. Da auf diese Weise etliche Webseiten nicht mehr im Firefox lauffähig waren, hat man eine minimal erforderliche Teilmenge als File and Directory Entries API standardisiert, das seit 2016 im Firefox und seit 2018 auch in Edge und Safari verfügbar ist.

Zugehörige Artikel:

JavaScript-Objekte

• FileSystem
• FileSystemEntry
  • FileSystemDirectoryEntry
  • FileSystemFileEntry
• FileSystemDirectoryReader

Ergänzungen anderer Objekte

• File: webkitRelativePath()
• input type="file": webkitdirectory-Attribut
• input type="file": webkitEntries-Eigenschaft

Beispiele

• tbd

File System API, File System Access API und OPFS

Die Idee eines File System API ist später wieder aufgelebt und wurde ab 2020 in den Browsern implementiert. Seine Verwendung erfordert einen sicheren Kontext (https://). Die Objekte des File System API erlauben das Lesen und Schreiben von Dateien und Verzeichnissen.

Ein Speicherort, auf den das File System API wirken kann, ist das Origin Private File System (OPFS). Hierbei handelt es sich um ein virtuelles Dateisystem, auf das von außerhalb des Browsers nicht zugegriffen werden kann und das wie LocalStorage und IndexedDB den Speicherbegrenzungen unterliegt, die die Browser pro Origin festlegen.

Das File System Access API bietet die zusätzliche Möglichkeit, auf Verzeichnisse und Dateien zuzugreifen, die auf der Festplatte oder einem Netzwerkspeicherort des Benutzers liegen. Dieser Teil steht allerdings nur in Chromium-Browsern zur Verfügung und kann daher nur für Sonderfälle, bei dennen ein Chromium-Browser vorausgesetzt werden kann, genutzt werden. Mozilla hat sich sehr klar zum File System Access API positioniert: Nein, das implementieren wir nicht!

Zugehörige Artikel:

JavaScript-Objekte

• FileSystemHandle
  • FileSystemDirectoryHandle
  • FileSystemFileHandle
• FileSystemSyncAccessHandle
• FileSytemWritableFileStream

Ergänzungen anderer Objekte

• StorageManager: getDirectory()
• Window: showOpenFilePicker()
• Window: showDirectoryPicker()
• Window: showSaveFilePicker()
• DataTransferItem: getAsFileSystemHandle()

Beispiele

• tbd