How Load Images From Drop down button Google WebApp script?

user_11823363 0
Viewed 59

I'm trying to load images from the drop-down button generated based on the Google Sheet's Folder ID

Google Sheet

enter image description here

Out Put

enter image description here

What I'm Trying To ACHIEVE is: I want to load the images on the front end display which is in a google drive folder based on the drop-down list on the front end of Web app.

THE PROBLEM

I'm unable to add the Folder ID into the getPictures() function and also I'm having issues connecting the Folder ID based on the dropdown.

Code.gs

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

function getPictures()
{

    var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  var idURL = sheet.getRange(1, 1, sheet.getLastRow(), 1).getValues();
    var destination_id = '1GNBiddMQZTl3Ti_mKs9CUM541p-yaCnv';  // 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;
}


function getValuesFromSpreadsheet() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  return sheet.getRange(1, 1, sheet.getLastRow(), 1).getValues(); // Retrieve values and send to Javascript
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>

  <div class="dropdown">
     <button onclick="loadpics()" class="dropbtn">Dropdown</button>
     <div id="myDropdown" class="dropdown-content"></div>
  </div>

  <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:auto;" ></td></tr>
  <? } ?>  
  </table>
  </body>
</html>


<script>
  function loadpics() {
    google.script.run.withSuccessHandler(function(ar) {
      let select = document.createElement("select");
      select.id = "select1";
      select.setAttribute("onchange", "selected()");
      document.getElementById("myDropdown").appendChild(select);
      ar.forEach(function(e, i) {
        let option = document.createElement("option");
        option.value = i;
        option.text = e;
        document.getElementById("select1").appendChild(option);
      });
    }).getValuesFromSpreadsheet();
  };

  function selected() {
    const value = document.getElementById("select1").value;
    console.log(value);
  }
</script>

COPY OF GOOGLE SHEET - Click here

I'm not a coder, Could you please help me to achieve my task. Thank in advance.

google-apps-script google-sheets javascript
1 Answers

You can refer to this sample code:

Code.gs

function doGet(e) {
  var htmlOutput =  HtmlService.createTemplateFromFile('index');
  var vehicle = getValuesFromSpreadsheet();
  var pictures = getPictures("1"); //show 1st vehicle as default
  htmlOutput.vehicle = vehicle;
  htmlOutput.pictures = pictures;
  return htmlOutput.evaluate();
}

//Get pictures based on the selected option
function getPictures(option)
{
  var row = parseInt(option) + 1;
  Logger.log("option: "+option+" row: "+row);

  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  var destination_id = sheet.getRange(row, 2).getDisplayValue();
  var file_array = [];
  Logger.log(destination_id);
  try{
    var destination = DriveApp.getFolderById(destination_id);
    var files = destination.getFiles();
    while (files.hasNext()) 
    {
      var file = files.next();
      file_array.push(file.getId());
    }
  }catch(err){
    Logger.log(err.message);
  }
  Logger.log(file_array.length);
  return file_array;
}


function getValuesFromSpreadsheet() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  return sheet.getRange(1, 1, sheet.getLastRow(), 1).getValues().flat(); // Retrieve values and send to Javascript
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>

  <div class="dropdown" >
    <div id="myDropdown" class="dropdown-content" style="width:200px;">
      <b>Vehicle Menu: </b> 
      <select id="select1" onchange="selected()">
        <?for(var i = 1; i < vehicle.length; i++) { ?>
        <option value=<?= i ?>><?= vehicle[i] ?></option>
        <? } ?> 
      </select>
    </div>
  </div>

  <h1>Display Pictures</h1>
  <div id="defaultPictures">
    <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:auto;" ></td></tr>
      <? } ?>  
    </table>
  </div>
  <div id="displayPictures"></div>
  </body>
</html>


<script>

  function selected() {
    //Hide default pictures
    var defaultDiv = document.getElementById("defaultPictures");
    defaultDiv.style.display = "none";
  
    const value = document.getElementById("select1").value;
    console.log(value);
    
    //Update table from the selected option
    google.script.run.withSuccessHandler(function(ids) {
    
      //Create a html table string based on the picture ids
      let tblHtml = '<table>';
      //Create table rows from the picture ids
      ids.forEach(id => {
        tblHtml += '<tr><td><img src="https://drive.google.com/uc?export=view&id='+id+'" style="width:400px;height:auto;" ></td></tr>';
      });
      tblHtml += '</table>';
      //update div to include the table
      console.log(tblHtml);
      document.getElementById("displayPictures").innerHTML = tblHtml;
    }).getPictures(value);

  }
</script>

What it does?

  1. I removed the dropdown button. Instead, I updated the dropdown options using vehicle variable which was initialized in doGet()
  2. I created 2 div which displays your images. <div id="defaultPictures"> displays the table of images initialized using pictures variable set in doGet() while <div id="displayPictures"></div> will display the pictures of the selected option in the dropdown menu.
  3. I modified getPictures() to add option argument which is the option value selected in your dropdown menu. Note that the option value is in zero index. ("Prado" value is 1 while "Prado 2" value is 2)
  4. When initializing pictures variable in your html, I used "Prado" with option value 1 as a default pictures to display.
  5. When a dropdown menu is selected, it will call selected() in your hmtl. Hide the defaultPictures div and create a new table based on the selected option.

Sample Output:

enter image description here

user_146060460
Related