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.
