4

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

}
Improve this question
8
  • In my test it is faililng at that google.script.run.uploadFiles(fileForm) call. It doesn't even call the function. It throws some 'uncaught' error. I would submit a bug report at issuetracker.google.com/issues?q=componentid:191640. Let me know the # when you submit and I'll star it cause I see the same issue. Commented Mar 18, 2020 at 22:20
  • 1
    In fact, I tested Google's own code at developers.google.com/apps-script/guides/html/…, except in a sidebar, and it yields the same error. Google's code does work in a normal web-app. I wonder if the file serialization in a form is only for web-apps? Commented Mar 18, 2020 at 22:23
  • Is there anything that I can do for your question? If my answer was not useful for your situation. I have to apologize and modify it. If you can cooperate to resolve your issue, I'm glad. I would like to think of about the solution. Commented May 12, 2020 at 21:57
  • 1
    @Tanaike Just after I posted this we went into lock-down due to Covid-19. So I haven't got the time/possibility to test it. But it looks like your answer will be a good workaround I've just havn't got the possibility to test it. As soon as I'll be able too I'll give you feedback. Commented May 14, 2020 at 17:04
  • @Kasper Egelund Thank you for replying. I can understand about this situation. Thank you, too. Commented May 14, 2020 at 23:16

1 Answer 1

Reset to default
8

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:

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Hi, I've tried this workarround but it's not working... could you take a look? thanks. stackoverflow.com/questions/61730044/…
@Juan Bravo Roig At first, in my environment, I could confirm that this script worked. I saw your question. Although in your question, you say that you upload mp3, when I saw console.log(file.mimeType) in your question, it's audio/wav. I think that when MP3 is uploaded, the mimeType is audio/mpeg. How about this? By the way, can I ask you about the detail of it doesn't work...? And also, can you provide whole script for replicating your issue? If you can do, please add it to your question.
thanks for the quick response. The log was audio/wav because i've tested with mp3 and wav files, none of them works. Sorry for the missunderstandig. The only difference between my script and yours is that I pass the file and also a couple of form fields. The file.bytes and file.mimeType are being sended to the server function properly, but when i try to create the newBlob it just return undefined.
@Juan Bravo Roig Thank you for replying. I tested your added script. Unfortunately, I could confirm that the script worked. When the blob is created as a file, the binary file (mp3 file) can be created. So I cannot replicate your issue. This is due to my poor skill. I deeply apologize for this. Can you provide your current script for replicating your issue?
hi! I finally resolved the issue, it was really ridiculous. I've updated the question and i add the response. Thanks also!
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.