Using the Google Picker to upload files to Drive
Monday, June 11, 2012 | 3:38 PM
Labels: Drive SDK
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. |
9 comments:
Bog Imp said...
How i can setup Upload Folder destination if i have Folder ID?
June 11, 2012 at 4:48 PM
Claudio Cherubino said...
You can use DocsUploadView.setIncludeFolders(true) to allow users to select a folder, but you can't programmatically set a folder to upload files to:
https://developers.google.com/picker/docs/reference#DocsUploadView
June 11, 2012 at 4:52 PM
Bog Imp said...
Oh, it's bad... but i can move files to my folder after upload.
Also it's possible to show all files from folder for pick?
?? setQuery(string)
June 11, 2012 at 5:04 PM
Claudio Cherubino said...
Please check the documentation for all available settings:
https://developers.google.com/picker/docs/
June 11, 2012 at 5:12 PM
Jason Kirkland said...
Could you help me find more info about the "PickerBuilder.setAuthUser(string)" method?
The documentation says:
"Specify an email address, domain name, or a Google profile ID to use as the authenticated user. The user must already be logged into this account."
What does "domain name" mean?
Thanks Claudio,
Jason Kirkland
City of Lewisville, Texas
June 11, 2012 at 6:41 PM
Claudio Cherubino said...
Not sure about that option, try asking the same question in the Picker API forum:
https://groups.google.com/group/Google-Picker-API
June 11, 2012 at 7:45 PM
Nicolas said...
Hey Jason,
the setAuthUser(string) function allows you to specifies which account will be used by the picker in case the user is multi-logged-in.
As you may know users can be logged simultaneously in multiple Google accounts and this method should be used to avoid the picker using the wrong account. You can pass it the user's email or the user's ID both of which you get using the userInfo API (which you can get access at the same time as the Drive API using OAuth 2.0 for instance).
You can also pass it a domain name that will be useful only if one of the account that the user is multi-logged-in with is a Google apps domain. So if you are logged with both username@gmail.com and username@mydomain.com then using setAuthUser('mydomain.com') will make sure the second account is used. But in any case it's safer to pass the full email address or the User ID.
PS: In the future it;s better and more convenient that you ask these types of questions on StackOverflow, we monitor the drive-sdk tag every day!
Cheers!
June 12, 2012 at 10:56 AM
Carlos Vigo said...
It does not support versioning of existing files...
June 12, 2012 at 11:09 PM
lll said...
Hello, excuse me, I am developing an application with google search's appi
could you help me, could you tell me where can search or could you tell me whom can I ask it.
Thank's, I'll waiting for you answer.
June 18, 2012 at 6:25 PM
Post a Comment