Search code examples
google-apps-scriptgoogle-sheetsfile-uploadweb-applicationsv8

Moving google apps script to v8 file upload stopped working from sidebar

I have an HTML sidebar in a Google spreadsheet with a file upload input field that doesn't work with the new v8 engine. It does work in the old runtimeVersion DEPRECATED_ES5.

The file upload in the sidebar is for uploading a single file to my google drive.

Html file

<body>
<h1>File Uploader</h1>
<form>
    <input type="file" name="myFile" id="file">
    <br>
    <input class="blue" type="button" id="submitBtn" value="Upload File" onclick="uploadthis(this.parentNode)">
    
</form>

<input type="button" value="Close" onclick="google.script.host.close()" />

<script>
  
function uploadthis(fileForm){

google.script.run
.uploadFiles(fileForm)
}


   
</script>
    
</body>

And here the simplified gs

function uploadContract() {
  var html = HtmlService.createHtmlOutputFromFile('ContractUpload').setTitle('Kontrakt upload').setWidth(300);
SpreadsheetApp.getUi().showSidebar(html);
}

function uploadFiles(data){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sStamdata = ss.getSheetByName('Stamdata_New');
var contractFolderId = sStamdata.getRange('D60').getValue(); 
var idag = Utilities.formatDate(new Date(), "GMT+1", "yyyyMMdd");
var title = sStamdata.getRange('D52').getValue();

var file = data.myFile;
var folder = DriveApp.getFolderById(contractFolderId);
var createFile = folder.createFile(file);
createFile.setName(idag+" - KONTRAKT - "+title);

}
Solution

  • Issue and workaround:

    I could confirm about the same situation of your issue (this was reported on Google's Issue Tracker). In this case, I think that when V8 is enabled, the form object might not be able to be parsed when the object is sent to Google Apps Script side with google.script.run. Although I think that this might be modified in the future update, as the current workaround, I would like to propose to send the uploaded file to GAS side as the byte array.

    When your script is modified, it becomes as follows.

    Modified script:

    HTML & JavaScript side: ContractUpload.html

    Please modify uploadthis as follows.

    function uploadthis(fileForm){
  const file = fileForm.myFile.files[0];
  const fr = new FileReader();
  fr.onload = function(e) {
    const obj = {
      // filename: file.name,  // In your script, the filename is given at GAS side. So I removed this.
      mimeType: file.type,
      bytes: [...new Int8Array(e.target.result)]
    };
    google.script.run.withSuccessHandler((e) => console.log(e)).uploadFiles(obj);
  };
  fr.readAsArrayBuffer(file);
}

    Google Apps Script side: Code.gs

    Please modify uploadFiles as follows.

    function uploadFiles(data){
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sStamdata = ss.getSheetByName('Stamdata_New');
  var contractFolderId = sStamdata.getRange('D60').getValue(); 
  var idag = Utilities.formatDate(new Date(), "GMT+1", "yyyyMMdd");
  var title = sStamdata.getRange('D52').getValue();
  
  var file = Utilities.newBlob(data.bytes, data.mimeType, idag+" - KONTRAKT - "+title);  // Modified
  var folder = DriveApp.getFolderById(contractFolderId);
  var createFile = folder.createFile(file);
  return createFile.getId();  // Added
}

    Note:

    • At above modification, when the file is uploaded, the file is converted to the byte array and send it to GAS side. Then, the file is created from the byte array. And the file ID is returned. You can see it at the console.

    References: