The Google Picker API provides developers with an easy-to-use file dialog that can be used to open Google Drive files directly from their web app independently of the Drive UI. The Drive SDK documentation includes an example showing how to incorporate the Google Picker with just a few lines of JavaScript.

Another powerful use case for the Picker API is to allow users to upload files to Drive with the same consistent UI. A single Picker dialog can incorporate multiple views and users can switch from one to another by clicking on a tab on the left:

The following code sample opens the Picker dialog and registers a simple callback function to handle the completed upload event:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Picker Example</title>

    <!-- The standard Google Loader script. -->
    <script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">

    // Use the Google Loader script to load the google.picker script.
    google.setOnLoadCallback(createPicker);
    google.load('picker', '1');

    // Create and render a Picker object for searching images
    // and uploading files.
    function createPicker() {
        // Create a view to search images.
        var view = new google.picker.View(google.picker.ViewId.DOCS);
        view.setMimeTypes('image/png,image/jpeg');

        // 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);
    }

    // A simple callback implementation.
    function pickerCallback(data) {
        if (data.action == google.picker.Action.PICKED) {
            var fileId = data.docs[0].id;
            alert('The user selected: ' + fileId);
        }
    }
    </script>
  </head>
  <body>
  </body>
</html>

There is an important difference between this upload example and the code used to open files: in addition to the standard view, an instance of DocsUploadView is added to the Picker object, thus providing upload capability.

For more information about this component and all other available views, please refer to the Google Picker Reference Guide.

Claudio Cherubino   profile | twitter | blog

Claudio is an engineer in the Google Drive Developer Relations team. Prior to Google, he worked as software developer, technology evangelist, community manager, consultant, technical translator and has contributed to many open-source projects. His current interests include Google APIs, new technologies and coffee.