JavaScipt - Datei-Up/-Download

[new2js]

Hallo,

ist es möglich mit JavaScript eine downloadbare Textdatei zu generieren?

Also dass der Browser eine Datei zum Download anbekommen bekommt, die von JavaScript aus Variablen generiert wird.

Ist es möglich durch ein Upload-Formular einen Textdatei-Inhalt zur Verarbeitung in JavaScript zu bekommen?

Möchte, dass der Nutzer eine Textdatei auswählen kann und nach Klick auf den Button der Inhalt durch mein JavaScipt verarbeitet werden kann.

Gruß

[Struppi]

ist es möglich mit JavaScript eine downloadbare Textdatei zu generieren?

Nein.

Ist es möglich durch ein Upload-Formular einen Textdatei-Inhalt zur Verarbeitung in JavaScript zu bekommen?

Nein.

Struppi.

[molily]

Ist es möglich durch ein Upload-Formular einen Textdatei-Inhalt zur Verarbeitung in JavaScript zu bekommen?

Nein.

Zumindest nicht in allen Browsern, prinzipiell gibts dafür aber eine API:
http://www.w3.org/TR/FileAPI/
https://developer.mozilla.org/en/using_files_from_web_applications
http://html5demos.com/file-api
Chrome und Firefox 4 können das schon.

Mathias

[Struppi]

Ist es möglich durch ein Upload-Formular einen Textdatei-Inhalt zur Verarbeitung in JavaScript zu bekommen?

Nein.

Zumindest nicht in allen Browsern, prinzipiell gibts dafür aber eine API:

Naja, prinzipiell kann er auch im IE über ActiveX auf die Datei zugreifen.

http://www.w3.org/TR/FileAPI/
https://developer.mozilla.org/en/using_files_from_web_applications
http://html5demos.com/file-api
Chrome und Firefox 4 können das schon.

Also nur in einem Browser der auch verwendet wird. Fx 4 ist noch keine offizielle Version. Insofern ist das noch weit davon entfernt in der Praxis benutzbar zu sein.

Und ich weiß nicht, ob diese Erweiterung wirklich sinnvoll ist. Es tut sich zumindest eine Schnittstelle auf die Sicherheitstechnisch anspruchsvoll ist und für den Benutzer noch mehr intransparente Abläufe mit JS ermöglicht.

Struppi.

[molily]

Es tut sich zumindest eine Schnittstelle auf die Sicherheitstechnisch anspruchsvoll ist und für den Benutzer noch mehr intransparente Abläufe mit JS ermöglicht.

Wieso? Für den Benutzer gibt es nur zwei (ihm schon vertraute) Fälle, um einer Website den Zugriff auf eine lokale Datei zu erlauben: Man wählt eine Datei über ein Upload-Feld (<input type=file>) aus oder zieht eine Datei ins Browserfenster (Drag'n'drop). Sicherheitstechnisch ist das eher trivial.
In beiden Fällen hat die Website auf die Datei Zugriff. Früher musste die Datei dann zum Server geschickt werden, jetzt kann JavaScript direkt damit arbeiten. Klar, das ist für den Benutzer nicht transparent, aber ein stinknormales <input type=file> ebenfalls nicht - er weiß ja nicht, wo das Formular hingesendet wird oder überhaupt dass es abgesendet wird (man kann das Formular in ein unsichtbares iframe leiten o.ä.).

Mathias

[Struppi]

Es tut sich zumindest eine Schnittstelle auf die Sicherheitstechnisch anspruchsvoll ist und für den Benutzer noch mehr intransparente Abläufe mit JS ermöglicht.

Wieso? Für den Benutzer gibt es nur zwei (ihm schon vertraute) Fälle, um einer Website den Zugriff auf eine lokale Datei zu erlauben: Man wählt eine Datei über ein Upload-Feld (<input type=file>) aus oder zieht eine Datei ins Browserfenster (Drag'n'drop). Sicherheitstechnisch ist das eher trivial.

Findest du? Bei der Rafinesse die Betrüger in der Vergangenheit an den Tag gelegt habe, befürchte ich dass sie sicher einen Weg finden diese Schnittstelle auszunutzen. Bei meinen Beobachtungen mit normalen Usern stelle ich fest, dass die meisten mit Drag&Drop alles andere als vertraut ist (was auch bei dem üblichen Vollbildmodus den alle benutzen oft nur schwer zu handhaben ist).

Mir fehlt ein bisschen diese Raffinesse, aber ich kann mir z.b. vorstellen, dass der User aufgefordert wird ein Verzeichnis zu auszuwählen, in dem sich eine sicherheitstechnisch relevante Datei ist, die der user nicht kennt, weil sie versteckt ist.

In beiden Fällen hat die Website auf die Datei Zugriff. Früher musste die Datei dann zum Server geschickt werden, jetzt kann JavaScript direkt damit arbeiten. Klar, das ist für den Benutzer nicht transparent, aber ein stinknormales <input type=file> ebenfalls nicht - er weiß ja nicht, wo das Formular hingesendet wird oder überhaupt dass es abgesendet wird (man kann das Formular in ein unsichtbares iframe leiten o.ä.).

Es sind einige Schritte mehr notwendig und es kann immer nur eine einzelne Datei ausgewählt werden. Das ist einerseits transparent und anderseits erfordert es eine gewisses mitdenken. Wenn nun ganze Ordner ausgewählt werden können, verringern sich diese Kontrollmöglichkeiten und bietet mehr Angriffsfläche.

Ausserdem hatten bisher noch alle Umsetzungen in den einzelnen Browsern Bugs gehabt, die von ausgenutzt wurden um den User entweder was unterzuschieben oder vorzugaukeln.

Läßt sich nur hoffen, dass das diesmal nicht so ist und nicht in meinem Browser.

Struppi.

[molily]

Es sind einige Schritte mehr notwendig und es kann immer nur eine einzelne Datei ausgewählt werden. Das ist einerseits transparent und anderseits erfordert es eine gewisses mitdenken. Wenn nun ganze Ordner ausgewählt werden können, verringern sich diese Kontrollmöglichkeiten und bietet mehr Angriffsfläche.

Also soweit ich das verstehe, lassen sich über DnD bzw. <input type=file> zusammen mit der File-API immer nur einzelne Dateien auswählen und verarbeiten. Der Benutzer muss sie also explizit auswählen, was er jetzt ggf. zusätzlich kann, ist das gleichzeitige Auswählen mehrere Dateien (<input type=file multiple>).
Was passiert, wenn man einen ganzen Ordner auf die Website zieht, weiß ich nicht. Aber ich habe noch nicht davon gehört/gelesen, dass man den dann selbst durchlaufen kann und Zugriff auf alle Dateien darin bekommt.

Übrigens habe ich mich geirrt und die File-API (insb. der FileReader zum Lesen von ausgewählten/gedroppten Dateien) funktioniert bereits in Firefox 3.6:
http://hacks.mozilla.org/2009/12/w3c-fileapi-in-firefox-3-6/
steht auch so in dem Link in meinem Ursprungsposting

Mathias

[Struppi]

Übrigens habe ich mich geirrt und die File-API (insb. der FileReader zum Lesen von ausgewählten/gedroppten Dateien) funktioniert bereits in Firefox 3.6:
http://hacks.mozilla.org/2009/12/w3c-fileapi-in-firefox-3-6/
steht auch so in dem Link in meinem Ursprungsposting

[strike]Ich hatte das auch gelesen, aber in meinem (3.6.12) funktioniert die Beispielseite nicht, zumindest passiert nichts, wenn ich eine Datei auf das Feld ziehe.[/strike]

Arggghhh, ich hatte nicht gelesen, dass man ein Bild auf das Feld ziehen soll.

also ok, funktioniert also in zwei Browser

Struppi.

[molily]

Jo, das hab ich zuerst auch falsch gemacht. ;) Ich mache später mal eine Beispielseite, die DnD sowie <input type=file> vereint und das Lesen von Textdateien erlaubt (readAsText statt readAsDataURL).

Mathias

[molily]

Ich mache später mal eine Beispielseite, die DnD sowie <input type=file> vereint und das Lesen von Textdateien erlaubt

http://molily.de/temp/file-api.html

Drag and drop sowie Upload-Feld funktionieren in Firefox 3 und Chrome, allerdings funktioniert es im Chrome nicht lokal wegen diesem Bug.

Grüße,
Mathias

[molily]

Zum Upload ganzer Verzeichnisse: Spezifiziert ist das noch nicht, aber Chrome 7 kann es bereits über das directory- bzw. webkitdirectory-Attribut von <input type=file>:
http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2010-April/025764.html

Mathias

[new2js]

Hallo,

aber mit all diesen Lösungen ist es nur möglich, eine Datei lesen im JavaScipt zu verwenden.

Eine generierte Textausgabe als Datei zum Download anzubieten oder in eine lokale Datei zu schreiben ist nicht möglich?

Grüße

[Struppi]

aber mit all diesen Lösungen ist es nur möglich, eine Datei lesen im JavaScipt zu verwenden.

Ja und wie gesagt momentan nur mit dem Chromebrowser

Eine generierte Textausgabe als Datei zum Download anzubieten oder in eine lokale Datei zu schreiben ist nicht möglich?

Nein.

Struppi.

[ChrisB]

Hi,

Eine generierte Textausgabe als Datei zum Download anzubieten oder in eine lokale Datei zu schreiben ist nicht möglich?

Nein.

location.href = "data:application/octet-stream;base64,SGVsbG8sIFdvcmxkIQ%3D%3D";

Das funktioniert bei mir in Firefox, Opera und Safari - alle öffnen den Download-Dialog, und nach dem Abspeichern habe ich eine Datei mit dem Textinhalt "Hello, World!".
Weitere Komfort-Features wie Vorschlagen eines Dateinamens etc. sind damit aber soweit ich sehe nicht drin.

Chrome reagiert darauf gar nicht, und IE 8 stellt mir nur den Data-URI in der Adresszeile dar und zeigt mir eine Fehlerseite, dass er die Ressource nicht anzeigen könne.

MfG ChrisB