Upload an Excel file or CSV file, so that the data can be appended

I used ChatGPT to help me write some scripts. Basically I would like to add a function in Google sheet, so that the user can upload an excel file or CSV file, so that the data of the excel file can be appended to current Google sheet. Here is what ChatGPT give me, but no matter how many times I have tried, the Excel data cannot be added… I have tried many different ways to debug but still doesn’t work:

Here is what in the Code.gs:

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('Custom Menu')
    .addItem('Upload Excel File', 'openSidebar')
    .addToUi();
}

function openSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('UploadSidebar')
      .setTitle('Upload Excel File');
  SpreadsheetApp.getUi().showSidebar(html);
}

function uploadExcel(data) {
  try {
    Logger.log('Starting uploadExcel function');
    if (data) {
      Logger.log('Data received, length: ' + data.length);
      var bytes = Utilities.base64Decode(data);
      Logger.log('Data decoded, byte length: ' + bytes.length);
      var blob = Utilities.newBlob(bytes, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'upload.xlsx');
      Logger.log('Blob created, blob size: ' + blob.getBytes().length);
      
      var file = DriveApp.createFile(blob);
      Logger.log('File created with ID: ' + file.getId());

      var fileId = file.getId();
      var sheetName = 'WB Accrual Data';
      var excelData = ExcelToCsv(fileId);
      Logger.log('Excel data converted to CSV format');

      var csvData = Utilities.parseCsv(excelData);
      Logger.log('CSV Data parsed: ' + JSON.stringify(csvData));

      var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName);
      if (sheet) {
        var lastRow = sheet.getLastRow();
        Logger.log('Last row in the sheet: ' + lastRow);
        sheet.getRange(lastRow + 1, 1, csvData.length, csvData[0].length).setValues(csvData);
        Logger.log('Data appended successfully.');
      } else {
        Logger.log('Sheet not found: ' + sheetName);
      }

      file.setTrashed(true); // Optional: Delete the file from Drive after importing
      Logger.log('File trashed');
    } else {
      Logger.log('Error: Data is null or undefined');
    }
  } catch (e) {
    Logger.log('Error: ' + e.toString());
  }
}

function ExcelToCsv(fileId) {
  var file = DriveApp.getFileById(fileId);
  var openSpreadsheet = SpreadsheetApp.open(file);
  var sheet = openSpreadsheet.getSheets()[0];
  var range = sheet.getDataRange();
  var values = range.getValues();
  var csv = "";
  for (var i = 0; i < values.length; i++) {
    csv += values[i].join(",") + "n";
  }
  Logger.log('CSV: ' + csv);
  return csv;
}

function testAppendData() {
  var testData = [
    ["A1", "B1", "C1"],
    ["A2", "B2", "C2"],
    ["A3", "B3", "C3"]
  ];
  var sheetName = 'WB Accrual Data';
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName);
  if (sheet) {
    var lastRow = sheet.getLastRow();
    sheet.getRange(lastRow + 1, 1, testData.length, testData[0].length).setValues(testData);
  } else {
    Logger.log('Sheet not found: ' + sheetName);
  }
}

Here is what in the UploadSidebar.html

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <script>
    console.log('Sidebar loaded'); // Log to confirm the sidebar is loaded

    function handleFileSelect(evt) {
      console.log('handleFileSelect called'); // Log to confirm the function is called
      var file = evt.target.files[0];
      console.log('File selected: ' + file.name); // Log the file name to confirm file selection
      var reader = new FileReader();
      reader.onload = function(e) {
        var data = e.target.result.split(',')[1]; // Get the base64 part
        console.log('File read successfully, base64 length: ' + data.length); // Log the base64 length
        google.script.run.withSuccessHandler(onSuccess).uploadExcel(data);
      };
      reader.readAsDataURL(file);
    }

    function onSuccess() {
      document.getElementById('status').innerHTML = 'File uploaded and data appended successfully.';
    }
  </script>
</head>
<body>
  <h2>Upload Excel File</h2>
  <input type="file" id="fileInput" />
  <div id="status"></div>
  <script>
    document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
    console.log('Event listener added to file input'); // Log to confirm event listener is added
  </script>
</body>
</html>

Can anyone please help me?? I am not a software engineer so I have no idea what’s wrong

  1. ChatGPT told me to check Developer Tools console for the log, and I did. But nothing was showed up there.
  2. Also I ensured my JavaScripts has been enabled and allowed
  3. The function of testAppendData() was correctly added but it just cannot extract the data from excels uploaded