How to get the names and links of your Gdrive files with GAS & HTML5/CSS3/JS!

by +Cesar Anton 

@reicek

Creating a servlet to deliver JSONP content via Google Apps Script it's possible thanks to the Content Service class and it's quite flexible and helps you communicate with Google APIs and services and deliver (text) data to your public Javascript code and do interesting stuff with it.

This post will focus on the Apps Script code, the required HTML/Javascript code to read it is explaines on this other article (it will get updated soon ;) ).

First you need to open the web Google Apps Script editor so we can create a "GAS JSONP Servlet", what it needs to do is to "listen" for HTML GET calls, and responds with a JSON string with all the file names and URLs saved in the users Google Drive. It also adds some "Padding" or "Prefix" to the JSON data, this is used to tell the JavaScript on the client which function should handle the data, this prefix is usually provided in the GET request, this is to give the Servlet more flexibility and allows you to update your Javascript without having to update the Servlet.

So let's hit the code:

First, create a new script project.

Now copy the following code:


Now it's time to publish your Servlet! Go to:

"Publish" -> "Deploy as we app"

The first time it will ask you to create a version, just type whatever name you find descriptive enough like "GAS JSONP servlet", "start", "v 1.0", e

Before publishing one must make a few decisions about the web app access behavior:

• "Execute the app as:"  Here you must decide if the App will work on your behalf or the user accessing the App (in the case it's public or shared), make the app will always act as if you were the one using it, use this if you wish to share (specific) data and (specific) access rights. If the web app is "Execute as the user accessing the web app", it can (once the user gives authorization) access the data of who ever is using it, this is usually the case.
• "Who has access to the app:" Here you decide who can call the web app, "Only myself" makes the web app private and it can only be called from web browsers were you are currently logged in with your Google Account, "Anyone" allows anyone with a Google Account to use the App, this is the way to go when you chose "Execute as the user accessing the web app". The last option is "Anyone, even annoymous" GAS won't bother checking who is calling the web app and will always act as if you were using it, this one should be used with extreme caution for anyone with the web apps URL can access whatever functionality you gave to the servlet.

Once you click "Deploy" you will be given the web app (servlet) URL, here you can check an example I made using the previous code:

https://script.google.com/macros/s/AKfycbyFwNCiJorBHWtUTOEP0LhD6xxxJoevmRUUzi_VZUTfsmYOEjQ/exec

This URL always points to the version of the web app you chose to publish, this is very useful since if something fails, you can go back to a previous version, or to a "temporal fix" version while you work and test the servlet without affecting the published version.

Were you see "Test web app for your lates code" if you click on "latest code" it will send you a special developer version of the servlet that points to the current Saved Version instead of the current Published Version, basically, the version you are currently working with.

Once you deploy your Servlet as a Web App, its a good idea to always check that the output its what you expect and to verify the JSONP syntax. It's amazing how easily one can mess with the valid JSON syntax, it should look like this:

({"":[{"name":"","property":""}]})

For testing purpouses I recommend using "alert" as the padding, this way you don't need to write a JavaScript function to handle the response, the browser will simply show it using a pop up. A more real-life example would look like this:

alert({
"files":[
{"name":"G-Drive allFiles JSONP Servlet",
"url":"https://docs.google.com/open?id=abcd1234"}
]
})


This example only gives the name and the url of the files, but it can pack any data related to it! I strongly recommend you to check the Official Documentation of the File Class and experiment adding more data in the servlet response.

Feel free to let me know your ideas, questions and requests.

Happy coding!