If there is no way to read a binary file on client-side Javascript, how to parse a text file?

Question

I'm going to put a text file on my ISP's server, e.g. http://home.ISP.net/~foobar/text.txt.

How can I read that with Javascript in the browser e.g. from http://home.ISP.net/~foobar/textreader.html?

I already know that I can't read a binary file that's on a web server from inside the browser.

Thanks.

Answer 1

Since you're gonna read it from the same domain, just use Ajax to load the file.

I think you could read a file in the client-side by just using a file input tag, and loading it with a FileReader object, though I don't know if it's supported on a browser other than Firefox.

Answer 2

In my cross-platform app I had the need to get documents from a cloud-sharepoint and store it on the local filesystem via cordova. Here the relevant parts of code that is working for me;

1) Ajax call to get and download the file

$.ajax({
            url:        fileurl,   // full qualified URL to document
            dataType: 'text',
            mimeType: 'text/plain; charset=x-user-defined',
            async:      false,
            cache:      false
            }).done(function(data) {    
                        var data = str2ab(data);
                        writeData(newfile, data);
            }); 

2) Prepare the fetched binary data

 function str2ab(str) {
          var buf = new ArrayBuffer(str.length); // 2 bytes for each char
          var bufView = new Uint8Array(buf);
          for (var i=0, strLen=str.length; i<strLen; i++) {
            bufView[i] = str.charCodeAt(i);
          }
          return buf;
    }

3) Write data to filesystem using cordova plugin. Hint: it is assumed the filesystem "fs" has been initialized before.

    function writeData(path, data)
    {
        var content, newContent = "";
        var newfile = path ;
        //
        fs.root.getFile(newfile, {create: true, exclusive: false}, 
                function(fileEntry) 
                {
                    fileEntry.createWriter(function(fileWriter) {
                        fileWriter.onwriteend = function(e) {
                            console.log('Write completed: ' + fileEntry.fullPath);                          
                        };
                        fileWriter.onerror = function(e) {
                            console.log('Write failed: ' + e.toString());
                        };

                        fileWriter.write(data);
                  }), 
                  function() {
                            alert("ERROR WRITE FILE");
                  }, 
                  function() {
                      alert("ERROR");
                  }
                }
        );                          
    };

Answer 3

You can read whatever file you want in the web server from inside the browser as long as it's in a "protected" path like "web-inf"...

Probably the easiest way to read the file is using the "load" from jQuery

http://api.jquery.com/load/

or the "ajax" one:

http://api.jquery.com/jQuery.ajax/

Answer 4

Your HTML document can use an XMLHttpRequest to fetch the text document.

Note that the file could be a binary file (e.g. an image) although parsing it would require some JavaScript trickery (e.g. by treating it as a string of bytes and processing it with string functions like substr).