Read Multiple Files With JavaScript and Wait for Result

Question

I would like to start by saying that (coming from c++ and python) I am totally new to JS and so I welcome any wise suggestions regarding my code.

I wish to read a number of files using the HTML5 file API, then open them with JS, perform some manipulation and download the results zipped. My problem is that reading the files seems to be an asynchronous operation, and I don't really see an elegant way to wait for them all to finish and then zip the results.

One possible solution is presented here: https://stackoverflow.com/a/17491515 but I am wondering if one can do better than using a global flag.

I also have a problem with retrieving the result from the async function as I have no idea how to get back new_file_list in changeCharsInFiles.

Thank you!

Code example: HTML:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body >
        <div class="container">
            <div class="jumbotron">
                <h3>Add Files Here</h3>
                <input type="file" id="the-file-field" multiple>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
        <script src="http://cdn.jsdelivr.net/g/filesaver.js"></script>
        <script>
         ########### SEE JS BELOW #####################
    </script>
</body>

JS:

if (window.File && window.FileReader && window.FileList && window.Blob) {

                //functions
                function zipMyFilesAndSave(file_list){

                    var zip = new JSZip();
                    for (var i = 0; i<file_list.length; i+=1)
                    {
                        zip.file(file_list[i].name, file_list[i]  );
                    }
                    zip.generateAsync({type:"blob"}).then(
                    function (blob) {                                      
                        saveAs(blob, "hello.zip");                         
                    }, 
                    function (err) {
                        jQuery("#blob").text(err);
                    }); 
                }

                function changeCharsInFiles(file_list){
                    var new_file_list = [];

                    for (var i = 0; i<file_list.length; i+=1)
                    {
                        var file = file_list[i]

                        var reader = new FileReader();
                        reader.onload = function() {
                            //alert(reader.result);
                            var txt  = reader.result;
                            console.log("txt: ",txt)

                            var new_txt = ""
                            var allTextLines = txt.split(/\r\n|\n/);

                            for (var j = 0; j<allTextLines.length; j+=1)
                            {
                                var res = allTextLines[j].replace("a", "A");
                                res = res.replace("b", "B");
                                res = res.replace("c", "C");
                                res = res.replace("d", "D");

                                new_txt += res + "\n"

                            }
                            console.log("new_txt: ", new_txt)
                            var new_file = new Blob([new_txt], {type: "text/plain"});

                            new_file_list.push(new_file); //<---------------------------how do I get this back?
                        }
                        reader.readAsText(file);    

                    }


                    return new_file_list;
                }

                //watcher
                $( "#the-file-field" ).change(function() {
                    console.log("files have been chosen")
                    var file_list = this.files
                    file_list = changeCharsInFiles(file_list)
                    zipMyFilesAndSave(file_list)    
                });


            } else {
                alert('The File APIs are not fully supported in this browser.');
            }

You can use a `callback`. `function longTaking() {setTimeout({callYourFunction},1000)`. `setTimeout()` is just an example to demo your fileReading. — deEr., May 23 '18 at 10:32

score 19 · Accepted Answer · answered May 23 '18 at 10:33

19

Try reading up on the Promise class, it was developed to make asynchronous operations easier:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

In your case, you could use it like this:

function changeCharsInFiles(file_list){
    let promises = [];
    for (let file of file_list) {
        let filePromise = new Promise(resolve => {
            let reader = new FileReader();
            reader.readAsText(file);
            reader.onload = () => resolve(reader.result);
        });
        promises.push(filePromise);
    }
    Promise.all(promises).then(fileContents => {
        // fileContents will be an array containing
        // the contents of the files, perform the
        // character replacements and other transformations
        // here as needed
    });
}

This is just a rough outline of the solution. I'd suggest you experiment a bit with Promises first (it can be a fairly deep topic) to figure out the basic principles, and then apply something like the above.

answered May 23 '18 at 10:33

Máté Safranka

4,081
1
10
22

1

Thank you, this worked rather well. I guess I cannot return the results and have to work with them within the `.then(fileContents => {})` part, right? This async thing is still very weird. – user140832 May 25 '18 at 08:29
Correct. I'll agree that asynchrony takes some getting used to; it's JavaScript's way of ensuring operations don't block, without using actual multithreading. I wrote an answer to another user previously: https://stackoverflow.com/questions/49954440/javascript-weird-behavior-in-foreach-loop/49959875#49959875 -- MDN also has a more detailed article: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop – Máté Safranka May 25 '18 at 08:37
Super answer. The script works perfect to read one - and more importent - mutiple gpx files (=text-files) without bigger changes - perfect, thank you very much! – ReFran Mar 16 '22 at 18:34

Read Multiple Files With JavaScript and Wait for Result

1 Answers1