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]
Show open dialog from JavaScript:
save
Data can be saved by navigating to a prepared URL. This can be done by:
- clicking on a link
- 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:
- construct string with old fashion Data URI [RFC 2397]
- 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]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:copy
It is possible to copy text in Firefox and Chrome.
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:
