Unable to run window.URL.createObjectURL(blob) to display a .png file

I am using an api to retrieve a .png file. When I try to create a URL for it so that I can display it in my HTML, the call fails with the following error:

userCodeAppPanel:94 Uncaught TypeError: Failed to execute ‘createObjectURL’ on ‘URL’: Overload resolution failed.

I am calling my api with this code (using Google Apps Script):

function retrieveAdmiraltyTideGraph(tideStationName, dateFrom, numDays){

//get tide station code from tide station name passed from user input
  let tideStationCode = getTideStationCode(tideStationName)

  var url = _admiraltyURL + "Stations/" + tideStationCode + "/TidalHeightGraph?dateTime=" + dateFrom + "&duration=" + numDays;
  url = url + "&width=500&height=200"
  var response = UrlFetchApp.fetch(url, _admiraltyRequestHeader);
  var responseCode = response.getResponseCode()
  var blob = response.getBlob()

  Logger.log("graph response" + responseCode)
  Logger.log(blob.getContentType())

  return blob
}

The api call is successful as the logger shows a correct return code, the check on the content type of the blob shows it to be “image/png” as expected.

I call the api function from Java Script using:

google.script.run.withSuccessHandler(showGraph).withFailureHandler(onFailure).retrieveAdmiraltyTideGraph(selectedStation, dateFrom, numDays);

and the function call to display the retrieved image is:

function showGraph(blob){

  var url = window.URL.createObjectURL(blob);
  document.getElementById("graph").src = url

}

This is failing when I attempt to get the url.

I’m quite new to JS and Google Apps Script so i may be getting something simple wrong, but I have very similar functions which pass and process arrays between an api handler, server code and client code.

Any suggestions?

Thanks

Answer

Modification points:

• In your Google Apps Script side, the blob is returned to Javascript side. Unfortunately, in the current stage, the blob of Google Apps Script cannot be directly used on the Javascript side. I thought that this might be the reason for your issue.

In your situation, how about the following modification?

Modified script:

Google Apps Script side:

From:

return blob

To:

return `data:${blob.getContentType()};base64,${Utilities.base64Encode(blob.getBytes())}`;

HTML&Javascript side:

From:

function showGraph(blob){

  var url = window.URL.createObjectURL(blob);
  document.getElementById("graph").src = url

}

To:

function showGraph(url){
  document.getElementById("graph").src = url
}

• In this modification, it supposes that the tag like <img id="graph"> is existing in your HTML. Please be careful this.

Reference:

• base64Encode(data)

Added:

From graph of document.getElementById("graph"), I thought that you might want to show the image. But, if you want to make user download the file from Google Apps Script, how about the following modification?

Modified script:

Google Apps Script side:

From:

return blob

To:

return [`data:${blob.getContentType()};base64,${Utilities.base64Encode(blob.getBytes())}`, blob.getName()];

HTML&Javascript side:

<input type="button" value="download" onclick="sample()">

<script>
function sample() {
  google.script.run.withSuccessHandler(showGraph).withFailureHandler(onFailure).retrieveAdmiraltyTideGraph(selectedStation, dateFrom, numDays);
}

function showGraph([url, filename]){
  fetch(url)
  .then(res => res.blob())
  .then(blob => {
    var a = document.createElement("a");
    var url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = filename;
    a.click();
  });
}

function onFailure(e) {
  console.log(e)
}

• In this modification, when the button is clicked, the file is downloaded by retrieving the data from Google Apps Script.
• In this case, please set the variables of selectedStation, dateFrom, numDays at Javascript side.