javascriptgoogle-apps-scriptfile-uploadimport-csvfile-import

Google App Script to imitate File - Import csv file into a sheet using a custom menu item

How do I write a script that can let me select and upload a CSV file from local drive in a Google Spreadsheet when clicking on a custom menu ? (I want to replicate via script the File-->Import command but in a new menu being rendered onOpen).

There's a similar question here, but the answer uses a method that is now deprecated. Script import local CSV in Google Spreadsheet

Deprecated answer

function doGet(e) {
  var app = UiApp.createApplication().setTitle("Upload CSV to Sheet");
  var formContent = app.createVerticalPanel();
  formContent.add(app.createFileUpload().setName('thefile'));
  formContent.add(app.createSubmitButton('Start Upload'));
  var form = app.createFormPanel();
  form.add(formContent);
  app.add(form);
//  return app;
  SpreadsheetApp.getActiveSpreadsheet().show(app);// show app 
}

function doPost(e) {
  // data returned is a blob for FileUpload widget
  var fileBlob = e.parameter.thefile;

  // parse the data to fill values, a two dimensional array of rows
  // Assuming newlines separate rows and commas separate columns, then:
  var values = []
  var rows = fileBlob.contents.split('\n');
  for(var r=0, max_r=rows.length; r<max_r; ++r)
    values.push( rows[r].split(',') );  // rows must have the same number of columns

  // Using active sheet here, but you can pull up a sheet in several other ways as well
  SpreadsheetApp.getActiveSheet()
                .getRange( 1, 1, values.length, values[0].length )
                .setValues(values);
}
Solution

  • I believe your goal is as follows.

    In this case, how about the following sample script?

    Sample script:

    Google Apps Script side: Code.gs

    Please copy and paste the following script to the script editor as a script.

    function onOpen() {
  SpreadsheetApp.getUi().createMenu("sample").addItem("import CSV", "importCsv").addToUi();
}

function importCsv(e){
  if (!e) {
    SpreadsheetApp.getUi().showModalDialog(HtmlService.createHtmlOutputFromFile("index"), "sample");
    return;
  }
  const csv = Utilities.parseCsv(Utilities.newBlob(...e).getDataAsString());
  const sheet = SpreadsheetApp.getActiveSheet();
  sheet.getRange(sheet.getLastRow() + 1, 1, csv.length, csv[0].length).setValues(csv);
}

    HTML and Javascript side: index.html

    Please copy and paste the following script to the script editor as a HTML.

    <form><input type="file" name="file" onchange="importCsv(this.parentNode)" accept=".csv,text/csv"></form>
<script>
function importCsv(e) {
  const file = e.file.files[0];
  const f = new FileReader();
  f.onload = d => google.script.run.withSuccessHandler(google.script.host.close).importCsv([[...new Int8Array(d.target.result)], file.type, file.name]);
  f.readAsArrayBuffer(file);
}
</script>

    Testing:

    When you test the above script, please run onOpen or reopen Spreadsheet. By this, you can see the custom menu. When you select "import CSV" from the custom menu, a dialog is opened. When you select a CSV file from your local PC, the CSV data is imported to the active sheet.

    Note:

    References: