CODEWITHSUNDEEP
javascriptgoogle-apps-scriptgoogle-drive-api
Canor
Canor

Reputation: 39

List Google Drive files from a given folder on a webpage

I'm looking for a way to list all files in specific google drive folder, also which updates the list automatically, and let everyone possible to look. I've found quite amount of articles that creates a spreadsheet to list them but they don't update themselves. I just can understand bit of JavaScript of I tried to modify some of other codes to no avail. Here is what I've done.

I created a Google Apps Script file

function doGet(e){
return HtmlService.createHtmlOutputFromFile('list.html');}

and inside list.html

<!DOCTYPE html>
<html>
  <head>
  <script type="text/javascript">
    var dir = "SpinFest2016 KPDS Clips"

    function listFilesInFolder(dir) {

      var folder = DriveApp.getFoldersByName(dir).next();
      var contents = folder.getFiles();
      var file;
      var name = [];
      var date = [];
      var desc = [];

      for (var i = 0; i < contents.length; i++) {

      file = contents[i];

      name[i] = file.getName();
      date[i] = file.getDateCreated();
      desc[i] = file.getDescription();

      };
    };
  </script>
  </head>
      <table style ="width: 100%">
      <tr>
          <th>이름</th>
          <th>제출일</th>
          <th>비고</th>
      <tr>
          <td><p id="name"></p></td>
          <td><p id="date"></p></td>
          <td><p id="desc"></p></td>
      </tr>
      <script type="text/javascript">
          document.getElementById("name").innerHTML = name;
      </script>

      </table>
  </body>
</html>

I tried to list only file names first but it never worked, and I can't figure out what's wrong. If you can point me which part is wrong and what I have to do, I'd very appreciate you're help. If there's any other better way (not only google-apps-script but also other ways to display file list) that fits conditions below I'd very thankful.

Upvotes: 2

Views: 2749

Answers (2)

adjuremods
adjuremods

Reputation: 2998

getFiles() will return a FileIterator, it may not have a .length property. Change the loop into a while-loop and check if the iterator hasNext is true, this way it will iterate. Also, try to change how you push items in to the array. See the modified snippet, hopefully this works.

while (contents.hasNext()){

    file = contents.next();

    name.push(file.getName());
    date.push(file.getDateCreated());
    desc.push(file.getDescription());

};

What goes after this, how you display it will be up to you.

Upvotes: 1

user3717023
user3717023

Reputation:

As written, your doGet gives a web browser an HTML page with some JS code embedded in it, which the browser will try to execute. And fail, since a web browser has no idea about DriveApp; it can run JavaScript, not Apps Script.

It's possible to execute Apps Script code in scriplets embedded in a page served by doGet, but the syntax make take a while to get used to.

For a simple page like yours, I would just create all HTML within doGet function, and serve that. See my example.

There was one more issue with your code: folder.getFiles() returns a file iterator, not an array. This is something you loop over using hasNext and next methods, as shown below. 

function doGet(e) {
  var template = '<table style ="width: 100%"><tr><th>name</th><th>Date</th><th>Description</th></tr>APPS_SCRIPT_CONTENT</table>';
  var dir = 'SpinFest2016 KPDS Clips';
  var folder = DriveApp.getFoldersByName(dir).next();
  var contents = folder.getFiles();
  var file, name, date, desc, list = []; 
  while (contents.hasNext()) {
    file = contents.next();
    name = file.getName();
    date = file.getDateCreated();
    desc = file.getDescription();
    list.push('<tr><td>' + name + '</td><td>' + date + '</td><td>' + desc + '</td></tr>');
  }
  var output = HtmlService.createHtmlOutput(template.replace('APPS_SCRIPT_CONTENT', list.join('')));
  return output.setTitle('Directory List').setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

This will serve up a static HTML file with the current snapshot of the directory. If the user reloads, they will get a possibly fresher copy. The file will not update on its own if the directory contents are changed; I don't think this even possible on this platform. With a scriplet running Apps Script code, one could try to update periodically, but this seems hardly practical: why waste your Apps Script execution time quota on users who opened your webpage and went for a walk?

Upvotes: 0

Related Questions