Toper Turor: Allowing the user to select Google Drive files from your application

Tuesday, March 10, 2015

Allowing the user to select Google Drive files from your application

If your application needs a way to let users easily choose a file from their Drive, this is for you.

Users can browse and select files from their Drive file list using the Google Picker API. The Google Picker API provides a user interface containing a list of all the users files in Google Drive.

Since the user interface is generated by the Picker API, there is very little effort in adding the Picker to an existing site. This article will show how to use the picker for your application, and discuss some of the configuration options.

First create a view on the data describing the type of Picker that we will be using. In this case, we’ll use google.picker.ViewId.DOCS. For more types of Picker, see the documentation.


 
  var view = new google.picker.View(google.picker.ViewId.DOCS);

You can set the MIME types to filter the list of files. This allows you to specify your application’s specific file types to display to the user.


 
  view.setMimeTypes("text/plain,text/html");

Use a PickerBuilder to set the required configuration parameters for your Picker.


 
  var picker = new google.picker.PickerBuilder()
    .enableFeature(google.picker.Feature.NAV_HIDDEN)
    .setAppId("your app id")
    .addView(view)
    .setTitle("Select a Text File")
    .setCallback(pickerCallback).build();

Once configured, the picker can be popped up to the user as often as you like, using


 
  picker.setVisible(true)

When a user selects a file with the Picker, the callback set in setCallback is called with the data from the dialog. Pass this callback as the action to perform when a user selects a file in the Picker.


 
  function pickerCallback(data) {
    if (data.action == google.picker.Action.PICKED) {
      var fileId = data.docs[0].id;
      alert(The user selected:  + fileId);
    }
  }

Check the data’s action, in this case google.picker.action.PICKED, and if it is appropriate, access the file ID as the the first element of the docs attribute.

Here are some additional tips on customizing your Picker.

You can allow the user to select multiple files. There will be more than one element in the data’s docs array, each representing a selected file.
```
 
  var picker = new google.picker.PickerBuilder()
    .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
 
```

You can hide the navigation bar.


 
  var picker = new google.picker.PickerBuilder()
    .enableFeature(google.picker.Feature.NAV_HIDDEN)

For a complete example, including how to load the Picker library, please visit our the Drive SDK documentation. Also, see the Picker API documentation for more information.

Ali Afshar profile | twitter

Ali is a Developer Programs engineer at Google, working on Google Docs and the Shopping APIs which help shopping-based applications upload and search shopping content. As an eternal open source advocate, he contributes to a number of open source applications, and is the author of the PIDA Python IDE. Once an intensive care physician, he has a special interest in all aspects of technology for healthcare.

Toper Turor

Tuesday, March 10, 2015

Allowing the user to select Google Drive files from your application

No comments:

Post a Comment