The execution is not entering 'onload' function

Question

Through the below code, I want to import an excel file into my grid and append it to the grid. For example, if I have 2 rows in the excel sheet and 4 in the grid, then after importing, the grid should have a total of 7 rows. But the execution is not entering the 'onload' function.

I also tried code from this article, but couldnt understand it. text

  $("#fileInput").on("change", function (e) {
      var fileInput = e.target;
      var files = fileInput.files;

      if (files.length > 0) {
        var fileName = files[0].name;
        var fileReader = new FileReader();

// THE CODE IS NOT WORKING AFTER THIS

        fileReader.onload = function (event) {
          var data = event.target.result;

          // Use XLSX library to parse the Excel file content
          var workbook = XLSX.read(data, { type: "binary" });
          var sheet = workbook.Sheets[workbook.SheetNames[0]];
          var rows = XLSX.utils.sheet_to_json(sheet, { header: 1 });
          var grid = $("#grid").data("kendoGrid");
          var griddataSource = grid.dataSource._data;

          // Assuming the structure of your Excel file matches the grid's schema
          for (var i = 1; i < rows.length; i++) {
            var row = rows[i];
            var dataItem = {
              ProductID: row[0],
              ProductName: row[1],
              Price: row[2],
            };

            // Add the new data item to the grid's data source
            grid.dataSource.add(dataItem);
          }
          $("#grid").data("kendoGrid").dataSource.data([]);
          $("#grid").data("kendoGrid").dataSource.data([griddataSource]);

          // Refresh the grid to reflect the changes
          grid.refresh();
          
        };
        // Read the content of the Excel file as binary string
        fileReader.readAsBinaryString(files[0]);
      }
    });