Ggtcf

I'm setting up a Google Picker API (subset of Drive API) button in my Rails 4.2 application to show viewable images and document files. I can login to Google Drive, select and access the upload modal without issue; however, on selection, the file url is displayed under the button as part of my callback, but no file is viewable.

Thanks for looking; the picker docs (https://developers.google.com/picker/docs/) are amazingly out of date, and what I've managed so far that actually works is sourced of derived from SO:

Google Picker API DocsUploadView setIncludeFolders not working

How to have multiple scopes with Google Calendar + Google Drive

Here is the code thus far - can anyone tell me what's missing from my callback to complete the view flow?

 <script type="text/javascript">

 // The Browser API key obtained from the Google API Console.
 var developerKey = "<%= ENV.fetch('GOOGLE_DEV_KEY') %>";

 // The Client ID obtained from the Google API Console. Replace with your own Client ID.
 var clientId = "<%= ENV.fetch('GOOGLE_CLIENT_ID') %>";
 var appId = "<%= ENV.fetch('GOOGLE_APP_ID') %>";

 // Scope to use to access user's photos.
 var scope = 'https://www.googleapis.com/auth/drive.readonly https://www.googleapis.com/auth/photoslibrary.readonly';
 //rWpDLsvXoNFGzsqsa28G8Cq7

 var pickerApiLoaded = false;
 var oauthToken;

 // Use the API Loader script to load google.picker and gapi.auth.
 function onApiLoad() 
 console.log('onApiLoad')
 gapi.load('auth2', onAuthApiLoad);
 gapi.load('picker', onPickerApiLoad);
 

 function onAuthApiLoad() 
 var authBtns = document.getElementsByClassName('auth');
 Array.from(authBtns).forEach(function(authBtn) 
 authBtn.disabled = false;
 authBtn.addEventListener('click', function() 

 gapi.auth2.authorize(
 client_id: clientId,
 scope: scope
 , handleAuthResult);
 );
 )
 

 function onPickerApiLoad() 
 pickerApiLoaded = true;
 createPicker();
 

 function handleAuthResult(authResult) 
 if (authResult && !authResult.error) 
 oauthToken = authResult.access_token;
 createPicker();
 
 

 // Create and render a Picker object for picking user Photos.
 function createPicker() 
 if (pickerApiLoaded && oauthToken) 

 var picker = new google.picker.PickerBuilder().
 enableFeature(google.picker.Feature.MULTISELECT_ENABLED).
 enableFeature(google.picker.Feature.MINE_ONLY).
 setAppId(appId).
 setOAuthToken(oauthToken).
 addView(google.picker.ViewId.DOCS_IMAGES).
 addView(google.picker.ViewId.DOCS).
 addView(new google.picker.DocsUploadView().setIncludeFolders(true)).
 setCallback(pickerCallback).
 build();
 picker.setVisible(true);
 
 

 // A simple callback implementation.
 function pickerCallback(data) 
 var url = 'nothing';
 if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) 
 var doc = data[google.picker.Response.DOCUMENTS][0];
 url = doc[google.picker.Document.URL];
 
 var message = 'You picked: ' + url;
 document.getElementById('result').innerHTML = message;
 

 window.addEventListener('DOMContentLoaded', function() 
 console.log('loaded!')
 onApiLoad()
 )
</script>

<%= content_for(:google_api_loader) do %>
 <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
<% end %>