How to get a direct download URL from Google Picker JavaScript API?

Question

I'm trying to get a direct download URL for a file using Google's Picker API so that I can choose a file and pass this URL to server side code to download and store a copy of the item on the server.

I'm able to authorize through the picker API and get info of a picked file including the file name and preview URL (which is confusingly referred to as simply "A URL to this item" in the JSON response docs: https://developers.google.com/picker/docs/results)

I noticed that there is a post about using the Drive API to get a direct download URL here: Get google drive file download URL

However when I do this in my picker callback function (based on the docs here: https://developers.google.com/picker/docs/)

I get an error of:

 "Project [number here] is not found and cannot be used for API calls. If it is recently created, enable Drive API by visiting https://console.developers.google.com/apis/api/drive.googleapis.com/overview?project=[project number here] then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry."

I have the API enabled in my developer console and the URL added to the JS allowed origins.

The documentation is very confusing and there seems to be 3 versions of the REST API to use with Drive which is based on an gapi.auth2 object whereas the picker api uses gapi.auth object.

I'm not sure if I need to authenticate again using the Google Drive API before performing the GET request. This all seems very messy and I believe there must be an easier approach for what is a simple request!

My picker callback function:

  pickerCallback: function(data) {
    if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
      var doc = data[google.picker.Response.DOCUMENTS][0];
      var fileName = doc[google.picker.Document.NAME];
      var url = doc[google.picker.Document.URL];
      var docId = doc[google.picker.Document.ID];
      var request = null;

      gapi.client.load('drive', 'v2', function() {
        request = gapi.client.drive.files.get({
          'fileId': docId
        });
        request.execute(function(resp){
          console.log(resp);
        });
      });


     //Write upload details to page
     //Populate hidden field
    }

Developer console screen - The first app is the picker API the second is for the Drive API:

Teyam Teyam · Accepted Answer · 2017-06-08T06:57:07

You may want to try the simple callback implementation shown in this documentation. Notice that url was initialized before the if statement:

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

Also, in authorizing, set the AppId value and choose the user account with the app's current OAuth 2.0 token. Note that the AppId set and the client ID used for authorizing access to a user's files must be contained in the same app. Then, after successfully obtaining the fileId, you can then send request using files.get. By default, this responds with a Files resource in the response body which includes downloadUrl.

For additional insights, see this related SO post.

How to get a direct download URL from Google Picker JavaScript API?

1 Answers