Posted on by

Display Pictures on Google Web App

In this post, I demonstrate how to display pictures from Google Drive on a Web App using Google Apps Script.

How to Video:

Video Notes:

  • Legacy Apps Script Editor Used in Video
  • Apps Script (Script Editor) is now located under tab ‘Extensions’ instead of ‘Tools’ on Google Sheets
  • For Further Details on Deploying a Web App Click Here

Code in Video:

function doGet(e) {
  var htmlOutput =  HtmlService.createTemplateFromFile('DisplayFile');  
  var pictures = getPictures();  
  htmlOutput.pictures = pictures;
  return htmlOutput.evaluate();
}

function getPictures()
{
    var destination_id = '';  // ID OF GOOGLE DRIVE DIRECTORY;
    var destination = DriveApp.getFolderById(destination_id);
    
    var files = destination.getFiles();
    var file_array = [];
    
    while (files.hasNext()) 
    {
      var file = files.next();
      file_array.push(file.getId());
    }

    return file_array;
}

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <h1>Display Pictures</h1>
  <table>
  <?for(var i = 0; i < pictures.length; i++) { ?>
  <tr><td><img src="https://drive.google.com/uc?export=view&id=<?= pictures[i] ?>" style="width:400px;height:500px;" ></td></tr>
  <? } ?>  
  </table>
  </body>
</html>

Related Posts

How to Deploy a Google Web App - In this post, I demonstrate how to deploy a Google Web App. I cover all the settings that are involved in deploying a web app.

Published by codewithcurt