Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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);

}
like image 317
Kasper Egelund Avatar asked Jan 26 '23 05:01

Kasper Egelund


1 Answers

How about this answer? Please think of this as just one of several possible answers.

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:

  • FileReader()
  • newBlob(data, contentType, name)

If I misunderstood your question and this was not the direction you want, I apologize.

like image 197
Tanaike Avatar answered Jan 29 '23 02:01

Tanaike