CODEWITHSUNDEEP
javascriptparsingfile-upload
Ravi
Ravi

Reputation: 11

File parsing at client side in web applications

I have a scenario where user will upload huge raw text file (size int the range 100MB - 2 GB), from which I extract few data.

If I were to avoid the file transfer to server side, instead read and parse the file at client side itself?

Technology stack - ExtJS5, Spring MVC at server side

Upvotes: 1

Views: 1349

Answers (2)

Matt Ellen
Matt Ellen

Reputation: 11592

If you don't want to use an XHR, and your browser is sufficiently compliant with standards, you can use File and FileReader.

var btn = document.getElementById('files');

btn.addEventListener('change', function(e)
		     {
			 var file = e.target.files[0];
			 var fr = new FileReader();
			 fr.onload = function(evt)
			 {
			     if (evt.target.readyState == FileReader.DONE)
				 {
				     alert(evt.target.result);
				 }
			 }

			 var blob = file.slice(0, 10);
			 fr.readAsText(blob);
		     }, false);
<input type="file" id="files"/>

The above reads the first 10 bytes of the file and alerts them. It assumes the file being read is a text file.

You don't have to use the slice, so you could just write fr.readAsText(file), and that would read the whole file in one go.

Since your files are quite big, though, you could use the slice mechanic to read through your file in chunks, searching each chunk for the appropriate information. This would prevent the system from running out of memory and potentially make things faster. It would be complicated, as you might have to look across chunk boundaries to find the info.

Upvotes: 1

PinoyPal
PinoyPal

Reputation: 388

Haven't tried this but I think you should try it out:

function readLocalFile(filename)
{
    var file = new XMLHttpRequest();
    file.open("GET", filename, false);
    file.onreadystatechange = function ()
    {
        if(file.readyState === 4)
        {
            if(file.status === 200 || file.status == 0)
            {
                var allText = file.responseText;
                //do what you wish with the text (parse, split, trim, etc)
            }
        }
    }
    file.send(null);
}

and of course, pass the local file name of the file you want to parse:

readLocalFile('file:///C:/path/to/file.txt');

Upvotes: 1

Related Questions