Nugroho's blog.: List Files on Certain Google Drive Folder and It's Subfolders

...and display it in html format using div tag with border so the files in subfolders will displayed in box, and files in other subfolder will displayed in other box. If subfolder have subfolder, then files inside that sub-subfolder will displayed inside box inside box, :s :P :D

The Algorithm itself is bit like this previous post. OK, I copy and paste a little bit of,..., ok most of code from it.

All by Google App Script.

I use string variable named text to receive all output.

Basically, after the script is completely executed, the content of variable text is complete html source code.

:)

Here it is

Code.gs

function listFilesNFolders(form) { 
 var text = ''; 
 var lv = 2; //for level depth 
 var home = DriveApp.getFolderById('0BxZS62a5NdNYUGxySmp2QW41OUU'); 
 text+='<br><h'+lv+'>'+home.getName()+'</h'+lv+'>' 
 var NIM = home.getFoldersByName("aa"); 
 if(NIM.hasNext()){ 
  var NIMfold = NIM.next(); 
  text+='<br><h'+lv+'>'+NIMfold.getName()+'</h'+lv+'>'; 
  text = crawl(NIMfold,text,lv); 
 } else{ 
  text+='<br> Anda belum mengupload tugas'; 
 } 
 Logger.getLog();
  return text; 
} 

function crawl(home,text,lv){ 
 lv++; 
 var files=home.getFiles(); 
 text+='<div id="p'+lv+'"style="border: 1px solid black;">'; 
 while (files.hasNext()){ 
  var file=files.next(); 
  text+='<br>'+file.getName();
  } 
 text+='</div><br>'; 
 var folders=home.getFolders(); 
 while (folders.hasNext()){ 
  var folder=folders.next(); 
  text+='<br><div id="p'+lv+'"style="border: 1px solid black;">'; 
  text+='<br><h'+lv+'>'+folder.getName()+'</h'+lv+'>'; 
  text = crawl(folder,text,lv); 
  text+='<br>'; text+='</div>'; 
 } 
 lv--; 
 return text; 
} function 
doGet(e) { 
 return HtmlService.createHtmlOutputFromFile('form.html'); 
}

..
form.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
    input { display:block; margin: 20px; }

    #p1 { position: relative; left: 10px;}
    #p2 { position: relative; left: 20px;}
    #p3 { position: relative; left: 30px;}
    #p4 { position: relative; left: 40px;}
    #p5 { position: relative; left: 50px;}
    #p6 { position: relative; left: 60px;}
    


    h1 { position: relative;margin-left: 10px;font-weight: bold;}
    h2 { position: relative;margin-left: 20px;font-weight: bold;}
    h3 { position: relative;margin-left: 30px;font-weight: bold;}
    h4 { position: relative;margin-left: 40px;font-weight: bold;}
    h5 { position: relative;margin-left: 50px;font-weight: bold;}
    h6 { position: relative;margin-left: 60px;font-weight: bold;}

    </style>
  </head>
  <body>
 
 <form id="myForm">
    <input type="submit" 
    value="OK"        
    onclick=
    "
    this.value='Proses';
    google.script.run.withSuccessHandler(fileUploaded).listFilesNFolders(this.parentNode);
    return false;
    "
                    >
  
</form>

<div id="output"></div>

<script>
    function fileUploaded(status) {
        document.getElementById('myForm').style.display = 'none';
        document.getElementById('output').innerHTML = status;
    }
</script>
    
  </body>
</html>

Look at the HTML code, the key for indentation is <px> tag with x = 1,2,3,4,5,6. The bigger the number, the more left margin increased. I modify the <hx> tag too.

The content of text variable after script's completely executed.

<br><h2>Testing</h2><br><h2>aa</h2><div id="p3"style="border: 1px solid black;"><br>nug.f<br>nug.f<br>nug.f<br>nug.so<br>nug.f<br>nug.f<br>nug.f<br>nug.f<br>nug.f<br>nug.f<br>nug.f<br>F-1.xls</div><br><br><div id="p3"style="border: 1px solid black;"><br><h3>Desktop</h3><div id="p4"style="border: 1px solid black;"><br>.DS_Store<br>tiketpulang.pdf<br>tiketberangkat.pdf<br>Gmail - Bukti Pemesanan Internet PT. KAI Persero.pdf<br>Gmail - Bukti Pemesanan Internet PT. KAI Persero (pulang).pdf</div><br><br><div id="p4"style="border: 1px solid black;"><br><h4>freebsdvbox</h4><div id="p5"style="border: 1px solid black;"><br>Screen Shot 2015-01-01 at 7.20.02 PM.png<br>Screen Shot 2015-01-01 at 1.56.36 PM.png<br>Screen Shot 2015-01-01 at 1.36.32 PM.png<br>Screen Shot 2015-01-01 at 1.36.00 PM.png<br>Screen Shot 2015-01-01 at 1.35.46 PM.png<br>Screen Shot 2015-01-01 at 1.33.32 PM.png<br>Screen Shot 2015-01-01 at 1.32.53 PM.png<br>Screen Shot 2014-12-31 at 11.30.41 PM.png<br>Screen Shot 2014-12-31 at 11.30.38 PM.png<br>Screen Shot 2014-12-31 at 11.30.16 PM.png<br>Screen Shot 2014-12-31 at 11.30.03 PM.png<br>Screen Shot 2014-12-31 at 11.29.13 PM.png<br>Screen Shot 2014-12-31 at 11.28.00 PM.png<br>Screen Shot 2014-12-31 at 11.26.33 PM.png<br>Screen Shot 2014-12-31 at 11.26.18 PM.png<br>Screen Shot 2014-12-30 at 8.16.46 AM.png<br>.DS_Store</div><br><br><div id="p5"style="border: 1px solid black;"><br><h5>freebsdss</h5><div id="p6"style="border: 1px solid black;"><br>.DS_Store</div><br><br></div><br></div><br></div><br><div id="p3"style="border: 1px solid black;"><br><h3>freebsdvbox</h3><div id="p4"style="border: 1px solid black;"></div><br><br><div id="p4"style="border: 1px solid black;"><br><h4>freebsdss</h4><div id="p5"style="border: 1px solid black;"></div><br><br></div><br></div><br><div id="p3"style="border: 1px solid black;"><br><h3>tugas momentum</h3><div id="p4"style="border: 1px solid black;"><br>tugastumbukan.zip<br>tugasmomentum.zip<br>tugasfisikarevisiyangsalah.zip<br>Screen Shot 2015-10-05 at 6.57.37 AM.png<br>IMG-20151004-WA0091.jpg<br>attachments.zip<br>20151004_201055.jpg<br>.DS_Store</div><br><br><div id="p4"style="border: 1px solid black;"><br><h4>attachments</h4><div id="p5"style="border: 1px solid black;"><br>20151004_221456.jpg<br>20151004_221113.jpg<br>20151004_221052.jpg<br>20151004_221024.jpg</div><br><br></div><br><div id="p4"style="border: 1px solid black;"><br><h4>tugasfisikarevisiyangsalah</h4><div id="p5"style="border: 1px solid black;"><br>IMG_1494.JPG<br>IMG_1489.JPG<br>IMG-20151005-WA0012.jpg</div><br><br></div><br><div id="p4"style="border: 1px solid black;"><br><h4>tugastumbukan</h4><div id="p5"style="border: 1px solid black;"><br>IMG-20151004-WA0039.jpg<br>IMG-20151004-WA0038.jpg<br>IMG-20151004-WA0037.jpg</div><br><br></div><br><div id="p4"style="border: 1px solid black;"><br><h4>tugasmomentum</h4><div id="p5"style="border: 1px solid black;"><br>IMG_20151004_143049.jpg<br>IMG_20151004_143023.jpg</div><br><br></div><br></div><br><div id="p3"style="border: 1px solid black;"><br><h3>pyTest</h3><div id="p4"style="border: 1px solid black;"><br>surface3d_demo2.py<br>surface3d_demo.py<br>sin3d.py<br>simple_anim.py<br>simple_3danim.py<br>sierpinski.py<br>nummpyArray.pdf<br>nugroho.so<br>nugroho.f90<br>nugroho.f<br>nug.so<br>nug.f<br>lines3d_demo.py<br>lines.mp4<br>image_demo.py<br>im.mp4<br>hellofortran.so<br>hellofortran.f<br>Fortran-and-CModulePython.pdf<br>contourf3d_demo2.py<br>cobamodul.py<br>coba2.py<br>coba1.py<br>basic_example.py<br>basic.py<br>animate_decay.py<br>animasi.py<br>anim.py<br>air3.py<br>air2.py<br>air.py<br>3danim.py<br>.DS_Store</div><br><br><div id="p4"style="border: 1px solid black;"><br><h4>air</h4><div id="p5"style="border: 1px solid black;"><br>air700.mp4<br>air4098f1024bit20int.mp4<br>air4096f1024bit.mp4<br>air2700f512bit.mp4<br>air1700.mp4</div><br><br></div><br></div>

Yeah, it looks like garbage, but it's actual html code and if we open it in web browser, it will looks like this.