Lokale Datei einlesen

[BAGZZlash]

Ich glaube, ich bin inzwischen zu alt für die Scheiße. Ich habe den Pfad zu einer lokal gespeicherten Datei als String und möchte deren Inhalt gern in eine Variable geschaufelt bekommen. In jeder normalen Sprache wäre das ein Einzeiler. Jetzt gerade habe ich eine Stunde gegooglet und es nicht hinbekommen. Mal liest nur aberwitziges Zeug von asynchronen Readern, Lambda Expressions, Web Workern, Blobs und Gott weiß noch für einem Zeug.

So was hab ich mir inzwischen zusammenkopiert:

<div id="MyDiv"></div>

<script>
function ReadLocalFile(FileName)
{
    var LocalFile = new File([""], FileName);
    var reader = new FileReader();
    reader.onload = function ()
    {
        return (reader.result);
    };
    return (reader.readAsText(LocalFile));
};

var Banane = ReadLocalFile("C:/Temp/Test.txt");
document.getElementById('MyDiv').innerHTML = Banane;

</script>

Es kommt kein Fehler in der Konsole, aber eben auf der Webseite steht bloß "undefined". Hm, solche Methoden, um Dateien zu laden, muss es doch millionenfach da draußen geben. Ich weiß aber nicht, wie ich danach suchen soll.

 

[JR Cologne]

So einfach ist das tatsächlich nicht.

Wenn du im Browser, was ich aufgrund deines Code-Beispiels annehme, Dateien vom entsprechenden Dateisystem des Computers einlesen willst, ist dies bisher nur eingeschränkt möglich.
Abgesehen davon, dass es natürlich Sicherheitsmechanismen gibt, damit nicht einfach deine Dateien ohne Zustimmung ausgelesen werden können, ist die entsprechende File System Access API wohl noch nicht in allen Browsern implementiert.

Üblicherweise würde man davon abgesehen eher einen File-Upload über das File-Input-Element anbieten, sodass der User die passenden Dateien selbst auswählen kann und dann diese mittels JS auslesen.

Beides wird im folgenden web.dev-Artikel beschrieben: https://web.dev/read-files/

Ein Problem bei der Recherche waren wahrscheinlich auch die vielen APIs rund um Node.js, wo natürlich der Zugriff auf das Filesystem deutlich einfacher zu handhaben ist.

Zudem sehe ich gerade, dass die File System Access API anscheinend letztendlich auch nur auf einen File-Picker zurückgreift, der aber etwas besser in das native Filesystem integriert ist und bspw. unterstützt, eine grobe Location anzugeben, wie z.B. der Bilder-Ordner.
Mehr dazu hier: https://developer.chrome.com/articles/file-system-access/

 

[BAGZZlash]

Inzwischen habe ich ChatGPT gefragt, wie ich das machen soll. Interessanterweise hat er mir auch zuerst eine Node.js-Lösung vorgeschlagen, das musste ich ihm erstmal ausreden.

Tatsächlich braucht's so einen "Dateien-durchsuchen"-Button und einen EventListener. Finde komisch, dass es nicht ohne geht, aber es passt immerhin zu meinem Use-Case, also alles gut. So hier klappt's jetzt:

<input type="file" id="dateiAuswahl" />

var LocalFile;
document.getElementById('dateiAuswahl').addEventListener('change', function (e) {
    const datei = e.target.files[0];

    if (datei) {
        const reader = new FileReader();

        reader.onload = function (event) {
            const dateiInhalt = event.target.result;
            LocalFile = dateiInhalt;
            DrawData(); // Meine Funktion, die die Daten verarbeitet. Man könnte auch den Dateiinhalt als Parameter übergeben und so die globale Variable einsparen, aber aus Gründen mache ich das jetzt erstmal so.
        };

        reader.readAsText(datei);
    }
});

 

[lord_haffi]

Finde komisch, dass es nicht ohne geht

Ich fände es komisch, wenn es in JS so einfach wäre Schließlich wäre es dann sehr einfach mittels JS deine Dateien auszuspionieren, indem du einfach noch nen AJAX an den Server dranhängst o.ä..

Normalerweise kommt man bei Webapps aber auch mit File-Uploads und lokalen Speichermethoden wie Cookies aus. Und falls nicht, ist eine Webapp dann wohl nicht das geeignete Format.