Uploading csv file with Google Scripts via HTML Service - Illegal Value in property 0

Question

I'm trying to create an interface to display a csv using Google script. However, whenever I load the file I get this error

`1729820382-mae_html_user_bin_i18n_mae_html_user.js:39 Uncaught TypeError: Failed due to illegal value in property: 0
    at Td (1729820382-mae_html_user_bin_i18n_mae_html_user.js:39)
    at Pd (1729820382-mae_html_user_bin_i18n_mae_html_user.js:39)
    at 1729820382-mae_html_user_bin_i18n_mae_html_user.js:6
    at 1729820382-mae_html_user_bin_i18n_mae_html_user.js:21
    at Object.fileToCsv (1729820382-mae_html_user_bin_i18n_mae_html_user.js:38)
    at loadFile (<anonymous>:10:23)
    at HTMLInputElement.onchange (VM1402 userCodeAppPanel:1)`

The console log is showing the file correctly, but it seems to be tripping up when it tries to pass it to the Google script. Do I need a special file reader?

HTML is here

   <!DOCTYPE html>
    <html>
    <head>
      <base target="_top">
    </head>
    <body>
      <input type="text" id="itemHolder" name="itemHolder" style="display:none"/>
      <input type="file" id="myFile" name="myFile" onchange="loadFile(event)"/>
      <p id="textStuff"></p>
    </body>
    </html>


    <script type="text/javascript">

    function loadFile(event) {
      var input = event.target.files[0];
      console.log(input)
      google.script.run.fileToCsv(input);
    }


    function printout(array){
      console.log("Try")
     var spot = document.getElementById('textStuff');
     spot.innerHTML = array;
     }

     </script>`

GAS Here

function fileToCsv(myFile){
  var strData = myFile.getBlob().getDataAsString();
  Logger.log(strData);
   return strData;
  //return CSVToArray( strData )

}

This is a very easy to use [file upload solution](https://stackoverflow.com/questions/21013693/google-forms-file-upload-complete-example). — Cooper, Jul 21 '17 at 01:18

score 0 · Accepted Answer · answered Jul 21 '17 at 07:39

You need to pass the entire form object to code.gs file. Refer the below code.

HTML

<!DOCTYPE html>
    <html>
    <head>
      <base target="_top">
    </head>
    <body>
      <form id="testForm">
        <input type="text" id="itemHolder" name="itemHolder" style="display:none"/>
        <input type="file" id="myFile" name="myFile" onchange="loadFile(event)" accept=".csv"/>
        <p id="textStuff"></p>
      </form>
    </body>
    </html>


    <script type="text/javascript">

    function loadFile(event) {
      var inputData = event
      google.script.run.withSuccessHandler(printout).fileToCsv(document.getElementById("testForm"));
    }


    function printout(array){
      var spot = document.getElementById('textStuff');
      spot.innerHTML = array;
     }

     </script>

Code.gs

function fileToCsv(form){
  var fileData = form.myFile
  return fileData.getBlob().getDataAsString()
}

With the recent change to chrome v8 engine, It doesn't work anymore. — Waqar Ahmad, Mar 11 '20 at 12:45

Uploading csv file with Google Scripts via HTML Service - Illegal Value in property 0

1 Answers1