How do I use Google doc picker with html service

Question

I am working on a Google apps script that uses html service. I want to provide the user with a file chooser so they can choose a file from their Google drive.

I have seen two different API's that seem to do this, Google Picker and Google DocsListDialog.

I am unable to get either to work. I have copied the example code exactly as is from both doc pages, but I can't get the picker to appear.

Google Picker I tried calling from javascript in my html page. I copied the Hello World example from the document page. Nothing appeared.

I then tried the DocsListDialog in the script itself (called by pressing a button in the html using google.script). Nothing appeared this time either - though the example code returns the the picker to the doGet function - which returns it as well. My doGet returns the html since I am using html service.

I just want anyway to integrate a simple doc picker into my app. Sample code that I can cut and paste and then modify would be really helpful since I can probably figure it out from there.

Thanks.

---

It may help to explain what I am trying to do since someone may have a different approach suggestion.

I am a teacher at a school and an amature programmer. We use google sites and google drive at our school. I want to create an app on an internal site page that teachers can use to copy and share a template file with a whole class automatically.

The only way I know how to do this is to create a google apps script that uses html service. I can then combine html and javascript to create an easy to use form to get the information from the teacher. I know how to have the script get the file, copy it, add viewer or editors, etc.

Right now that only way I know how to have the teacher identify their file is to enter the file id. Many of the teachers at my school are not overly profiicient with computers, and I would like to make this part simpler, since explaining how to identiy and copy the id from the web address is not so easy.

I saw a few references to the google doc picker and this seemed liked a nice way to do it if there was some way to make it work with what I need (or some other easy way to accomplish what I need).

Any helpful suggestions would be much appreciated.

Answer 1

You actually can get it to work in HTML Service. Here's how...

Create a new apps script project and make the following files in the project:

Code.gs file:

function doGet() {
return HtmlService.createTemplateFromFile('index')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.NATIVE)
.setTitle('Picker');
}

index.html file:

<script type="text/javascript">
// Use the Google Loader script to load the google.picker script.
google.setOnLoadCallback(createPicker);
google.load('picker', '1');
// picker info here
function createPicker() {
// Create default view to folders
var view = new google.picker.View(google.picker.ViewId.FOLDERS);
// Use DocsUploadView to upload documents to Google Drive.
var uploadView = new google.picker.DocsUploadView();
var picker = new google.picker.PickerBuilder().
addView(view).
addView(uploadView).
setAppId('YOUR APP ID').
setCallback(pickerCallback).
build();
picker.setVisible(true);
}
// callback implementation.
function pickerCallback(data) {
    if (data.action == google.picker.Action.PICKED) {
        var fileId = data.docs[0].id;
        alert('The user selected: ' + fileId);
    }
}
</script>

1. Save the project and publish it and run.

2. Include apps script subroutines in the pickerCallback(data) function.

   Adapted from: Google Apps Developer's Blog Post

Answer 2

DocsListDialog is clearly part of uiservices and not html service. Why do you expect it to work there? Also filepicker uses a library that is not caja compliant. Read the docs about htmlservice and caja.

Edit: with the new aps script iframe mode you should be able to use the regular filepicker library.