Search code examples
javascriptpapaparse

Understanding Papaparse with local file


I am trying to understand how to properly implement Papaparse with a local file. I have looked at a lot of online resources, and the approach they take is this

loadTextFromFile (event) {
    if (!event.target.files[0]) {
        alert('Upload a file.')
    } else {
        let file = event.target.files[0];
        if (file) {
            let reader = new FileReader();
            let config = {
                delimiter: "",
                newline: "",
                quoteChar: '"',
                escapeChar: '"',
                header: true,
                trimHeaders: false
            };

            reader.onload = e => this.$emit('load', Papa.parse(event.target.result, config));
            reader.onload = function (event) {
                let results = Papa.parse(event.target.result, config);
                console.log('PAPA RESULT: ', results.data);
                console.log('ROWS:', event.target.result);
            };
            reader.readAsText(file);

        } else {
            alert('Please select a file to upload.')
        }
    }
}

So they use a FileReader and it doesnt seem to load the file until the end within readAsText. However, the above example works perfectly, although I still need to fully understand the code.

Then there are other examples, which seem to do it without a FileReader

loadTextFromFile (event) {
    if (!event.target.files[0]) {
        alert('Upload a file.')
    } else {
        let file = event.target.files[0];
        if (file) {
            Papa.parse(file, {
                header: true,
                dynamicTyping: true,
                complete: function(results) {
                    console.log(results.data)
                }
            });

        } else {
            alert('Please select a file to upload.')
        }
    }
}

Once again, this works perfectly. So what I am trying to understand is why do people sometimes use the FileReader, and perhaps an explanation as to what exactly is happening in the first example.

What option should I be using?

Thanks


Solution

  • It looks like the first example doesn't really make sense -- they're assigning reader.onload twice, so the first assignment that does the $emit thing isn't even used.

    I would say that the first example is a bit sloppy and unnecessary. The only reasons that jump to mind for using your own FileReader are:

    1. A desire to learn how to use the FileReader API,
    2. A need to customize the FileReader for some reason
    3. Wanting to time how long it takes to load the file vs. how long it takes Papa to parse the content

    I would mostly ignore the first example, and stick to the examples in Papa's documentation which are cleaner and simpler.