Wait for Javascript FileReader is finished

Question

This is my Code in my Swal.fire preConfirm:

  preConfirm:  function () {

                    var selectedfiles = "";
                    var file =  $('#files')[0].files[0];

                         if (file) {
                            var reader = new FileReader();
                            reader.readAsText(file, "UTF-8");
                            reader.onload = function (evt) {
                                selectedfiles = evt.target.result;
                            }
                            reader.onerror = function (evt) {
                                selectedfiles = "error reading file";
                            }
                        }

                    var email = $('#email').val();
                    var header = $('#header').val();
                    var content = $('#content').val();

                          return {
                              'email': email,
                              'header': header,
                              'content': content,
                              'selectedfiles': selectedfiles
                          };


                },

Problem is my return doesnt wait for FileReader, and the selectedfiles is null.

I tried https://stackoverflow.com/a/17491515/13629479 but it doesnt work, its still null.

Answer 1

According to the documentation, you can return a promise to make it wait for something asynchronous. So you could do something like this (since async functions return promises):

preConfirm:  async function () {
    const file = $('#files')[0].files[0];
    // The `text` method returns a promise for the text of the file
    const selectedfiles = file ? await file.text() : "";
    const email = $('#email').val();
    const header = $('#header').val();
    const content = $('#content').val();
    return {
        email,
        header,
        content,
        selectedfiles,
    };
},

You could use FileReader instead wrapping it in a promise, but the File object's text method (inherited from Blob) is more convenient.

Answer 2

How about returning Promise so that Swal can resolve it?

preConfirm: function() {
    return new Promise((resolve, reject) => {
        var selectedfiles = null;

        var email = $('#email').val();
        var header = $('#header').val();
        var content = $('#content').val();
        var file =  $('#files')[0].files[0];

        if (file) {
            var reader = new FileReader();
            reader.readAsText(file, "UTF-8");
            reader.onload = function (evt) {
                resolve({
                    'email': email,
                    'header': header,
                    'content': content,
                    'selectedfiles': evt.target.result
                });
            }
            reader.onerror = function (evt) {
                reject("error reading file");
            }
        } else {
            resolve({
                'email': email,
                'header': header,
                'content': content,
                'selectedfiles': null
            });
        } 
    });
}