Display and select Google Drive thumbnails in HTML form

Other Questions Google drive
1

I’m trying to make a webpage that shows thumbnails of all images from a folder before a form. Users should be able to pick one image, and that choice should be copied to the form on the same page. When the form is submitted, it should only send the chosen image number and the form data.

Here’s what I’ve got so far:

<div>
  <label>
    <input type="radio" name="pick" id="pic1" hidden>
    <img class="thumbnail" src="image1.jpg" id="thumb1" value="1" alt="Picture 1" onclick="chooseImage(this.id);">
  </label>
  <label>
    <input type="radio" name="pick" id="pic2" hidden>
    <img class="thumbnail" src="image2.jpg" id="thumb2" value="2" alt="Picture 2" onclick="chooseImage(this.id);">
  </label>
</div>

I want to show 4 images per row and use all images from a specific folder. How can I make the ‘src’ point to images in that folder? I’ve used HtmlService.createTemplateFromFile('form.html') before with a variable to pass info to HTML, and it worked well. Any ideas on how to do this with images?

2

Hey there! I’ve actually tackled a similar project before. One approach that worked well for me was using the Google Drive API’s thumbnailLink property. It gives you a direct URL to a thumbnail image for each file.

For the layout, I found CSS Grid to be super handy. You can set it up like this:

.thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

Then in your JavaScript, you can fetch the files and dynamically create the elements. Something like:

function createThumbnail(file) {
  const label = document.createElement('label');
  const input = document.createElement('input');
  const img = document.createElement('img');
  
  // Set up attributes here
  
  label.appendChild(input);
  label.appendChild(img);
  return label;
}

Hope this helps point you in the right direction! Let me know if you need any clarification.

3

hey jess, try using google drive api to load pics dynamically. use javascript to create the img tags, and set css grid or flexbox for 4 pics in a row. might want to embed small thumbs with data urls. hope it works!

4

To display thumbnails from a specific Google Drive folder, you’ll need to integrate the Google Drive API. First, obtain the folder ID and set up OAuth2 authentication. Then, use the Drive API to fetch file metadata and create thumbnail URLs.

In your HTML, create a container div for the thumbnails. Use JavaScript to dynamically generate the image elements and radio inputs. You can structure the layout with CSS Grid or Flexbox for 4 images per row.

For performance, consider lazy loading the images as the user scrolls. Also, implement error handling in case some images fail to load.

Remember to handle the form submission by capturing the selected image ID and other form data before sending it to your server-side script.