Display and select Google Drive thumbnails in HTML form

Other Questions Google drive
1

I’m trying to create a webpage where users can pick an image before filling out a form. Here’s what I want to do:

  1. Show thumbnails of all images from a folder
  2. Let users pick one image
  3. Copy the chosen image info to the form
  4. Send only the image number and form data when submitted

I’ve got this HTML setup with radio buttons (hidden by CSS) and images:

<div>
  <label>
    <input type="radio" name="pick" id="img1">
    <img class="thumb" src="photo1.jpg" id="p1" value="1" alt="Image 1" onclick="chooseImage(this.id);">
  </label>
  <label>
    <input type="radio" name="pick" id="img2">
    <img class="thumb" src="photo2.jpg" id="p2" value="2" alt="Image 2" onclick="chooseImage(this.id);">
  </label>
</div>

How can I make the ‘src’ point to images in a Google Drive folder? I’ve used HtmlService.createTemplateFromFile(‘form.html’) before, but I’m stuck on this part. Any ideas?

2

Hey CreativePainter33, have u tried using google drive api? it lets u fetch thumbnails directly. u could make an ajax call to get the image urls, then dynamically create ur html elements. might need some js tweaking but should work. good luck!

3

I’ve faced a similar challenge before. One approach that worked for me was using Google Apps Script to create a web app that serves as a bridge between your HTML form and Google Drive. Here’s a rough outline:

  1. Write a GAS function to fetch image metadata from your Drive folder.
  2. Create a web app that exposes this function via doGet().
  3. In your HTML, use google.script.run to call the GAS function and get image data.
  4. Use JavaScript to dynamically generate your image elements with the fetched data.

This method avoids direct API calls from the client-side, simplifying auth. It’s not perfect - there might be some lag if you have many images - but it’s a good starting point. You’ll need to tweak your HTML and add some JavaScript, but it should get you on the right track.

4

To display Google Drive thumbnails in your HTML form, you need to leverage the Google Drive API. First, set up the necessary API credentials and enable the Drive API in your Google Cloud Console, then use the files.list method to retrieve images from your folder. A high-level approach involves implementing server-side code to fetch the image metadata from Drive, passing this data to client-side JavaScript, and dynamically generating the HTML elements with correctly set src attributes. Consider using the thumbnailLink property provided by the API for each file. Remember to manage authentication properly and to implement caching to improve performance.