Meteor, Semantic UI Progress while big csv-file parsing

Question

I'm trying to parse big csv-file in Meteor app and to show progress with Semantic UI Progress component. But it freezes and shows only final result.

Template.ordersImport.events({
    'click button': function (e) {
        e.preventDefault();
        Papa.parse($('#importedFile')[0].files[0], {
            delimiter: ';',
            newline: '\n',
            header: true,
            fastMode: true,
            complete: function (result) {
                $('form').hide();
                $('#progress').show();
                var totalSize = result.data.length;
                _.each(result.data, function (item, index) {
                    var progress = (index + 1) / totalSize * 100;
                    $('#progress').progress({
                        percent: progress
                    });
                });
            }
        });
    }
});

Use a worker thread and update the UI in the `step` function. — MasterAM, Sep 23 '16 at 08:49
Worker thread doesn't work in Meteor (harrison_papa-parse.js?hash=af12d7c…&papaworker:14 Uncaught ReferenceError: Package is not defined) — Yevhen Marievych, Sep 26 '16 at 07:35
You are correct. The worker does not work in the Meteor package since it is all bundled into one file, but it may be possible to modify the library code such that it inlines the worker function (as a string), place it in the `public directory` or wait for a WebWorker build target to be supported by Meteor (it was suggested, not sure it will ever happen). You can still use the `step` function, though (it would still block if you don't use a worker). — MasterAM, Sep 26 '16 at 08:10

score 0 · Answer 1 · edited May 23 '17 at 10:27

Code in the browser runs in a single thread, so even though you update a progress variable, it won't get rendered to the UI until the parsing of the file finishes.

It's not good practice to do lengthy processing in the UI - it becomes unresponsive, and may crash the browser, especially for large files.

I would recommend passing the file to the server, and doing the processing there.

https://forums.meteor.com/t/how-to-use-web-worker/17511

This answer might help too if you want to keep the processing in the browser

How to run an unblocking background task in a Meteor/JavaScript client?

Meteor, Semantic UI Progress while big csv-file parsing

1 Answers1