Google picker open multiple views on subsequent calls for folder selection - google-picker

Question

I am using the following filepicker.js code,it works fine for displaying documents and folders. When I open the google picker for displaying the folder,on subsequent calls multiple picker will open.
(function() {
/**
* Initialise a Google Driver file picker
*/
var myType = 'empty';
var FilePicker = window.FilePicker = function (options) {
// Config
this.apiKey = options.apiKey;
this.clientId = options.clientId;
this.accesstoken = options.accesstoken;
myType = options.dType;
// Elements
this.buttonEl = options.buttonEl;
// Events
this.onSelect = options.onSelect;
this.buttonEl.addEventListener('click', this.open.bind(this));
// Disable the button until the API loads, as it won't work properly until then.
this.buttonEl.disabled = true;
// Load the drive API
gapi.client.setApiKey(this.apiKey);
gapi.client.load('drive', 'v2', this._driveApiLoaded.bind(this));
google.load('picker', '1', { callback: this._pickerApiLoaded.bind(this) });
}
FilePicker.prototype = {
/**
* Open the file picker.
*/
open: function() {
// Check if the user has already authenticated
var token = gapi.auth.getToken();
if (token) {
// alert(JSON.stringify(token) + " token status");
this._showPicker();
} else {
// The user has not yet authenticated with Google
// We need to do the authentication before displaying the Drive picker.
this._doAuth(true, function () {
// alert('in the doAuth ')
this._showPicker();
}.bind(this));
}
},
/**
* Show the file picker once authentication has been done.
* #private
*/
_showPicker: function () {
var view = null;
if (myType == "Folder") {
view = new google.picker.DocsView(google.picker.ViewId.FOLDERS)
.setIncludeFolders(true)
.setMimeTypes('application/vnd.google-apps.folder')
.setSelectFolderEnabled(true);
}
if (myType=="DOC") {
view = google.picker.ViewId.DOCUMENTS;
}
if (myType == "PPT") {
view = google.picker.ViewId.PRESENTATIONS;
}
// alert("Final access token "+ this.accesstoken);
// alert(this.picker);
this.picker = new google.picker.PickerBuilder().
addView(view).
setAppId(this.clientId).
setOAuthToken(this.accesstoken).
setCallback(this._pickerCallback.bind(this)).
build().
setVisible(true);
console.log(view);
},
/**
* Called when a file has been selected in the Google Drive file picker.
* #private
*/
_pickerCallback: function (data) {
if (myType == "DOC" || myType == "PPT") {
if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
var file = data[google.picker.Response.DOCUMENTS][0];
url = file[google.picker.Document.URL];
this._fileGetCallback(url);
}
}
if (myType == "Folder") {
if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
console.log(google.picker);
var url = JSON.stringify(data.docs[0]);
this._fileGetCallback(url);
}
}
},
/**
* Called when file details have been retrieved from Google Drive.
* #private
*/
_fileGetCallback: function (abc) {
if (this.onSelect) {
this.onSelect(abc);
}
},
/**
* Called when the Google Drive file picker API has finished loading.
* #private
*/
_pickerApiLoaded: function() {
this.buttonEl.disabled = false;
},
/**
* Called when the Google Drive API has finished loading.
* #private
*/
_driveApiLoaded: function() {
this._doAuth(true);
},
/**
* Authenticate with Google Drive via the Google JavaScript API.
* #private
*/
_doAuth: function (immediate, callback) {
gapi.auth.authorize({
client_id: this.clientId,
scope: 'https://www.googleapis.com/auth/drive',
immediate: immediate
}, callback);
}
};
How can I stop making mutiple google views?

Answer 1

For my use I moved the var picker = line out of the function and into the global scope then checked in createPicker() if the picker var was null. If it was then I did the whole create, if not then just the setVisible(). Seems to work here, hope this helps.
var picker = null;
function createPicker() {
if (pickerApiLoaded && oauthToken && picker === null) {
var view = new google.picker.View(google.picker.ViewId.DOCS);
view.setMimeTypes('application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document');
picker = new google.picker.PickerBuilder().
addView(view).
setOAuthToken(oauthToken).
setDeveloperKey(developerKey).
setCallback(pickerCallback).
build();
picker.setVisible(true);
} else if(pickerApiLoaded && oauthToken && picker !== null) {
picker.setVisible(true);
}
}

Answer 2

You can disable feature for various views. Use PickerBuilder.enableFeature and PickerBuilder.disableFeature to turn on/off views.
Below is a sample code for disabling multiple selection view:
var picker = new google.picker.PickerBuilder().disableFeature(google.picker.Feature.MULTISELECT_ENABLED)