Split A large JSON into Smaller parts in Javascript/jQuery

Question

I have a file upload functionality in my application which can not upload JSON files which are more than 10MB in size. If user uploads a file >= 10 MB , My app should split it into smaller JSON files each less than 10MB. Also, the Proper JSON objects needs to be maintained in the new low-sized files.

Is there a way to do this in Javascript or jQuery?

there are chunk uploaders you can use ... take a look at [plupload](http://www.plupload.com/) for example. It also has server side code in multiple languages — charlietfl, Apr 28 '15 at 21:03
parse the JSON, divide into many parts, stringify each one, upload. — dandavis, Apr 28 '15 at 21:13

score 2 · Answer 1 · answered Apr 28 '15 at 21:25

I propose a solution like this without any specific library. It does use a bit of modern techniques but maybe useful to you:

var openFile = function(event, callback) {
    // get target input
    var input = event.target;
    // create an instance of filereader
    var reader = new FileReader();
    // define handler to get results
    reader.onload = function(e){
      var contents = e.target.result;
       // use a promise maybe to make this neater
      callback(contents);
    };
    // make sure you tell it to read as text
    // also maybe add some validation on your input
    // for correct types
    reader.readAsText(input.files[0]);
};

var getChunks = function(str){
    var chunks = [];
    // not best at these things but this should be 
    // around 1mb max
    var chunkSize = 1000000;

    // while the chunk is less than the size indicated it goes
    // into the same item of array
    while (str) {
        if (str.length < chunkSize) {
            chunks.push(str);
            break;
        }
        else {
            chunks.push(str.substr(0, chunkSize));
            str = str.substr(chunkSize);
        }
    }
    return chunks;
}

var fileInput = document.querySelector('#jsonUpload');

fileInput.addEventListener('change', function(event){
    openFile(event, function(str){
        console.log(getChunks(str));
    });
});

Then it would read the json file from:

<input type='file' accept='*' id="jsonUpload">

Link to the fiddle

Split A large JSON into Smaller parts in Javascript/jQuery

1 Answers1