Load Large Files in Slices with HTML5

Sometimes you have to parse and search through some really large files and this is where bash tools and scripts work best. A little perl script, grep, awk, or sed can help you quickly read a portion of a file, do a search and replace, etc. Since I often code on a Mac, I have covered some simple OSX command-line one liners that I find helpful. But what about managing huge files in the browser? I noticed that Ace Editor can handle a file of few megabytes without any issues in a browser, and it comes with Regex search. It actually works faster on big files that my SublimeText for some strange reason.

But, what about loading and managing a much bigger file, like 100MB, a Gigabyte, or even more? Maybe you have a SQL file where you only need to change the database name and have no access to command-line. The HTML5 FileReader API can read a slice of a file so today I decided to mix HTML5 drag and drop, Ace Editor, and FileReader API to create an online tool that can read a slice of a very large file right in the browser. You can change the loaded text in Ace Editor but changing files requires a save/download button.

This means that we need to combine the loaded slice with the rest of the file, and thus, we need to read the rest of the file in the browser. So, a Gigabyte here might crash the browser but I had no problem with 100MB that I tested. The final point is that we are reading the file to look at something, perhaps change something, and thus this tool is only really designed for text and not binary content. You can still drag and drop an image or any other binary file, but I am using “readAsText” method of the FileReader, and thus, saving binary files will not work. This tool is to load and modify really large text files, like txt, json, csv, xml, sql, etc.

Here is the demo: Read, Modify, and Save Large Files with HTML5