Local I/O tests

This page investigates possible ways of copying file data between a web page and a local system not involving the server. Data generated by JavaScript can be saved to a client disk. Also script on the page can process file supplied by the user.

read

Read local file using File API. [File API] It specifies FileReader interface. [FileReader MDN]

Works in Firefox 3+, Chrome and Opera.

Show open dialog from JavaScript:

Chrome, Firefox 4 and Opera ≈11.61 support click() method on <input type=file>. Earlier browsers required some hacking. [quirksmode.org, Styling an input type="file"]
open file

    save

    Data can be saved by navigating to a prepared URL. This can be done by:

    1. clicking on a link
    2. assigning to location.href

    Link method provides opportunity to assign file name using download=filename.ext attribute.

    Chrome (WebKit [WebKit Changeset 91797: Add support for download='filename' attribute in anchors]) and Firefox 20+ [Mozilla Bug 676619: Implement proposed download attribute] support download attribute. In other browsers file save dialog will be triggered only for content they don't support, it will be shown in browser window otherwise. Also file name will be a garbage.

    URL may be prepared using following methods:

    1. construct string with old fashion Data URI [RFC 2397]
    2. use URL.createObjectURL [FileAPI: createObjectURL] to obtain reference to a file data (Blob [FileAPI: Blob interface]).

    There have been problems with 1st method in Chrome. Second works in Firefox and Chrome.

    Saving with data URI: hello.zip.

    Triggering save by click() method of a hidden link with a download attribute:

    This is plain text file, due to download attribute Chrome and FF20+ will show "Save As..." dialog even for viewable file.

      drop

      Dragging file to a page. [HTML5, Drag and Drop, whatwg.org]
      Works on Firefox 3.5+, Chrome, Opera 12

        drag

        This works in Chrome (WebKit).

        For dragging a file from the page, DownloadURL with data URL can be used. [HTML5 Rocks, Drag and Drop Download in Chrome]

        Drag one of these:
        hello.txt
        hello.zip
        ball.png

          copy

          It is possible to copy text in Firefox and Chrome.

          Copy text

          Mozilla fires event only when some text is selected.

          paste

          Firefox pastes files. Chrome allows to paste images but not files (not even image files).

          Mozilla fires event only for editable element:

          ✻ ✻ ✻
          Your browser:

          ©JB