How to fetch the URL of an image/video question posted in google form using app script?

Question

I'm trying to build a website using Google App Script where I copy all elements from my google form and show it in my own website. I was able to get the details of all elements using : https://developers.google.com/apps-script/reference/forms except for the Image elements.

This link doesn't have the information to get the image URL : https://developers.google.com/apps-script/reference/forms/image-item

I was able to fetch the BLOB but I couldn't fetch the image URL. For example in the screenshot, I need the highlighted URL of the image in my form : https://lh6.googleusercontent.com/uZtoCzoraW7vkkrN2289pX83Y6wwaRmMjpgBySWHaT3Vm2p9DVAA7Voy4CclYp2hve6c6zzzLkh-rF1yAX9fFPTTd940WMjwVtjcyMF2XCbdQ7YKQhhCfYxSUyKztcKacWCitDy4C31f9lQ

I need the URL of the image to add in the source tag of my website. Is there a method in google app script that can fetch me the URL of an image/video.

The form : docs.google.com/forms/d/… Fetching the image BLOB : case FormApp.ItemType.IMAGE: { var imgBlob = item.asImageItem().getImage(); var URL = imgBlob.getContentUrl(); } I want to fetch the URL of the Image Item. — Aman Jain
Hi ! SO according to what you have presented I believe you are successfully getting the Image Blob from your Image Item am I right? In that case your issue would be on how to use this Blob to display the image accordingly right? If that is the case take a look at this Stack Overflow answer and let me know if that worked. :D — Mateo Randwolf
@MateoRandwolf Google App script doesn't support window.URL || window.webkitURL; I need to use a Google app script function to get the Image URL which I'm unable to find. — Aman Jain
Hi ! Then I don't think it is possible to get the image URL from an image blob. How did you insert this image in your form? Did you inserted it with a script? If so then you must have the image URL somewhere. Also, a way to obtain this URL that I am not sure if it will fit your needs is to go to the form, right click, open image in new tab and copy image address. Then use this to fetch your image in your HTML. — Mateo Randwolf

Mateo Randwolf Mateo Randwolf · Accepted Answer · 2020-05-04T14:39:35

Solution

After taking a further look to your question, I found out I could use the Blob onject you get from the form image to create a drive file which then can be used to get its webContentLink url to be used in the web app using the Drive API.

To be able to use the Drive API in your Apps Scrip script please, in your script editor go to Resources -> Advanced Cloud Services and enable the Drive API in the dialog that will pop up.

This is the piece of code I have used for achieving what you aimed for with self explanatory comments (this is a simplified web app that only focuses on achieving your purpose):

Code.gs file

// Apps SCript function to serve the HTML file in the web
function doGet() {
  return HtmlService.createHtmlOutputFromFile('test');
}

// Function to be called in the HTML that returns the URL to be used by the image tag
function getUrl() {
  var form = FormApp.getActiveForm();
  // Get image blob
  var image = form.getItems()[0].asImageItem().getImage().getAs('image/jpeg');
  // Use the image blob for creating a new drive file
  var file = DriveApp.createFile(image);
  // Use the Drive API get method to get the property webContentLink which will return the link
  // of the image to be used in a website
  var fileURL = Drive.Files.get(file.getId()).webContentLink;
  
  return fileURL;
}

index.html

<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body id="body">
<h1>MY IMAGE</h1>

<script>

// Get what our function getURL returns
google.script.run.withSuccessHandler(function(URL) {
// Create HTML image tag
var img = document.createElement('img'); 
// Set its source to our file's sharable URL
img.src =  URL; 
// Attach image element to the body
document.getElementById('body').appendChild(img); 
}).getURL();

</script>

</body>
</html>

I hope this has helped you. Let me know if you need anything else or if you did not understood something. :)

How to fetch the URL of an image/video question posted in google form using app script?

1 Answers

Solution