How to convert bloburl/objecturl for Google Apps Script createFile() API?

Question

The code below contains the createFile() API, it expects a single object (named "file" here). In this way the file can be saved in some google drive folder

function uploadFiles(data)
{
 var file = data;
 var folder = DriveApp.getFolderById('1UWGb5Mzr9VzPUuQTr9CWD7EMYNEAzyuC');
 var createFile = folder.createFile(file);
 return createFile.getUrl();
}

Now I want to combine this function to another webpage. However, the script in another webpage is below:

      for (clipIndex = 0; clipIndex < unrollWordCounts(getAllWantedWords()).length; clipIndex++) {
        try {
          var clip = allClips[clipIndex];
          clip.style.display = 'None';
          var audioBlobUrl = clip.querySelector('audio').src;
          var word = clip.querySelector('p').innerText;
          var filename = word + '_' + Date.now() + '.ogg';
          saveAs(audioBlobUrl, filename);
   google.script.run.withSuccessHandler(onSuccess).uploadFiles(audioBlobUrl);
        }

The data I want to upload to google drive is audioBlobUrl. However, the createFile() of app script expect a file. It seems like audioBlobUrl is not a file. How should I modify the code, so that it can pass the expected data to google createFile() to achieve my aim?

About another webpage in your question, in this case, which is the web page on Google or other site? If the web page is on Google, the simple method using google.script.run can be used. But if the web page is not on Google, it is required to deploy your Google Apps Script as Web Apps and send the data with the HTTP request from the Javascript side. How about this? — Tanaike
the webpage is on google and in the same app script project. I have no issue calling the app script functions. The problem is I can't get the right data type that is suitable to pass into the app script createFile() function — owo ouo
Thank you for replying. About the webpage is on google and in the same app script project. I have no issue calling the app script functions., can you provide your script? Because, unfortunately, from your showing script, I cannot know about your script for communicating to Google Apps Script side. So I cannot imagine The problem is I can't get the right data type that is suitable to pass into the app script createFile() function. This is due to my poor skill. I deeply apologize for this. I would be grateful if you can forgive my poor skill. — Tanaike
Let me clarify. The way I use to communicate with app script is using google.script.run.withSuccessHandler(onSuccess).uploadFiles(audioBlobUrl). It replaces the position of saveAs() in the current post. And it doesn't work as I expected since audioBlobUrl is not a correct datatype. The createFile function expects a datatype of file. — owo ouo
Thank you for replying. Although I'm not sure about your actual situation, I proposed a modified script. Could you please confirm it? If that was not useful, I apologize. — Tanaike

Tanaike Tanaike · Accepted Answer · 2022-01-21T07:22:35

From your replying, I confirmed that your audioBlobUrl is like blob:https://n-gtuqz5opiogjdwjt5bm3j7sgiq5rl4g7osg6piq-0lu-script.googleusercontent.com/a9f62d15-c7c1-41c0-ac5d-0a05dcb01fa6. In this case, unfortunately, this URL cannot be directly used. So in order to use this at Google Apps Script, it is required to convert to the data. In this answer, I would like to propose the sample script for converting the URL to the data (in this case, the URL is converted to the byte array.). By this, the data can be decoded at Google Apps Script, and the data can be saved as a file.

Modified script:

Javascript side:

As a simple sample script, When your audioBlobUrl and filename are used, please use the following script.

fetch(audioBlobUrl).then(r => r.blob()).then(blob => {
  var fr = new FileReader;
  fr.onload = f => {
    var obj = {data: [...new Int8Array(f.target.result)], mimeType: blob.type, filename};
    google.script.run.withSuccessHandler(onSuccess).uploadFiles(obj);
  };
  fr.readAsArrayBuffer(blob);
});

Google Apps Script side:

At the Google Apps Script side, please modify uploadFiles as follows.

function uploadFiles({data, mimeType, filename}) {
  var file = Utilities.newBlob(data, mimeType, filename || "sampleFilename");
  var folder = DriveApp.getFolderById('1UWGb5Mzr9VzPUuQTr9CWD7EMYNEAzyuC');
  var createFile = folder.createFile(file);
  return createFile.getUrl();
}

Note:

google.script.run is run with the asynchronous process. It seems that google.script.run is used in a loop. Although I'm not sure about your whole script, if the asynchronous process will become your new issue, please modify it.
This modified script supposes that your audioBlobUrl is like blob:https://n-gtuqz5opiogjdwjt5bm3j7sgiq5rl4g7osg6piq-0lu-script.googleusercontent.com/a9f62d15-c7c1-41c0-ac5d-0a05dcb01fa6 from your replying. Please be careful this.
I'm not sure about your actual situation from your question. When you are using your script as the Web Apps, when you modified the script, please reflect the latest script to the Web Apps. Please be careful about this.

Reference:

fetch(url)