How do I provide my script with the file system so I can save data to disk?

Question

I have this webpage for converting text to chordpro. Today the content is modified in the text area; forcing me to open a text editor and then paste the text area content there, but I'd rather open a save file dialogue so that the contents can be saved to disk directly. I've tried to figure out how to make use of HTML5 Filesaver and I think I'm almost there, but I can't figure out how to provide the file system (fs)? Chrome keeps telling me fs is undefined (which it is as I haven't provided it).

Am I approaching this the right way and is there anything more than the file system that I need to provide for this to work?

This is how far I've gotten. HTML input is:

<button type="button" onclick=saveTextArea();>Convert</button>

and the Javascript is:

function saveTextArea(fs) {
    "use strict";
    convertToChordpro(); // Converts text area value to chordpro format

    var textArea = document.getElementById('textArea');
    var artist = document.getElementById('artist').value;
    var title = document.getElementById('title').value;
    var fileName = (artist && title) ? artist + "-" + title + ".txt" : "artist-title.txt";
    fs.root.getFile(fileName, {create: true}, function(fileEntry) {
        fileEntry.createWriter(function(fileWriter) {
                fileWriter.onwrite = function(e) {
                    console.log('Write completed.');
                };

                fileWriter.onerror = function(e) {
                    console.log('Write failed: ' + e.toString());
                };

                var bb = new BlobBuilder();
                bb.append(textArea.value);

                fileWriter.write(bb.getBlob('text/plain'));
            }, onError);
    }, onError);
}
function onError() {}
window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(TEMPORARY, 1024*1024, saveTextArea, onError);

Wolfgang Kuehn · Accepted Answer · 2013-02-10 15:35:37Z

1

Do something like this

~~var fs = window.requestFileSystem(TEM...); saveTextArea(fs);~~

-- edit --

Define the error handler:

function onError(e) { console.log(e); }

Either the initialization or the error handler must be called. In your case, the error handler will be called (because the initialization handler is not).

But... The w3c FileSystem API does not provide a file chooser, if that is what you want. Storage is local and cannot be accessed from outside the browser sandbox. The FileSystem API is pretty experimental and currently only supported by Chrome.

Maybe what you want is a simple file upload via <input type="file"> and posting the data to your server?

edited Feb 10, 2013 at 15:35

answered Feb 9, 2013 at 16:08

Wolfgang Kuehn

13k3 gold badges37 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MdaG Over a year ago

Thanks. I was hoping to be able to do this client side since I don't have a dedicated server.

MdaG Over a year ago

var fs = window.requestFileSystem(TEM...); returns undefined

Collectives™ on Stack Overflow

How do I provide my script with the file system so I can save data to disk?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related