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();

    return file_array;
<!DOCTYPE html>
    <base target="_top">
  <h1>Display Pictures</h1>
  <?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>
  <? } ?>  

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.