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
In your situation, how about the following modification?
return blob
return `data:${blob.getContentType()};base64,${Utilities.base64Encode(blob.getBytes())}`;
function showGraph(blob){
var url = window.URL.createObjectURL(blob);
document.getElementById("graph").src = url
}
function showGraph(url){
document.getElementById("graph").src = url
}
<img id="graph"> is existing in your HTML. Please be careful this.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?
return blob
return [`data:${blob.getContentType()};base64,${Utilities.base64Encode(blob.getBytes())}`, blob.getName()];
<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)
}
selectedStation, dateFrom, numDays at Javascript side.