I am trying to make a picker of Google drive that let me to upload new local files to Google Drive. The picker is working and it is showing me my Google Drive files, but there's only the select button and there's not a "upload" button. I added the view google.picker.DocsUploadView() but still not a button.

There it is my createPicker function:

function createPicker() {
  if (pickerApiLoaded && oauthToken) {
    var view = new google.picker.View(google.picker.ViewId.DOCS);
    view.setMimeTypes("image/png,image/jpeg,image/jpg");
    var picker = new google.picker.PickerBuilder()
        .enableFeature(google.picker.Feature.NAV_HIDDEN)
        .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
        .setAppId(appId)
        .setOAuthToken(oauthToken)
        .addView(view)
        .addView(new google.picker.DocsUploadView())
        .setDeveloperKey(developerKey)
        .setCallback(pickerCallback)
        .build();
     picker.setVisible(true);
  }
}  

Any thoughts?

I am trying to make a picker of Google drive that let me to upload new local files to Google Drive. The picker is working and it is showing me my Google Drive files, but there's only the select button and there's not a "upload" button. I added the view google.picker.DocsUploadView() but still not a button.

There it is my createPicker function:

function createPicker() {
  if (pickerApiLoaded && oauthToken) {
    var view = new google.picker.View(google.picker.ViewId.DOCS);
    view.setMimeTypes("image/png,image/jpeg,image/jpg");
    var picker = new google.picker.PickerBuilder()
        .enableFeature(google.picker.Feature.NAV_HIDDEN)
        .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
        .setAppId(appId)
        .setOAuthToken(oauthToken)
        .addView(view)
        .addView(new google.picker.DocsUploadView())
        .setDeveloperKey(developerKey)
        .setCallback(pickerCallback)
        .build();
     picker.setVisible(true);
  }
}  

Any thoughts?

• javascript
• google-picker

5 Answers 5

You'll be using DocsUploadView.

Use this in your createPicker code:

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(appId).
        setOAuthToken(oauthToken).
        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);
        createPicker();
    }
}

It will look like this.

In the docs example, this line:

.enableFeature(google.picker.Feature.NAV_HIDDEN)

hide the 'upload' tab

"Upload" button is in the "Navigation Pane" which you hide by "google.picker.Feature.NAV_HIDDEN" type.

Where is the rest of the code?

The most straightforward method for uploading a file is by making a simple upload request. This option is a good choice when:

The file is small enough to upload again in its entirety if the connection fails. There is no metadata to send. This might be true if you plan to send metadata for this resource in a separate request, or if no metadata is supported or available. To use simple upload, make a POST or PUT request to the method's /upload URI and add the query parameter uploadType=media. For example:

POST https://www.googleapis./upload/drive/v3/files?uploadType=media

The HTTP headers to use when making a simple upload request include:

Content-Type. Set to one of the method's accepted upload media data types, specified in the API reference.

Content-Length. Set to the number of bytes you are uploading. Not required if you are using chunked transfer encoding. Example: Simple upload

The following example shows the use of a simple upload request for the Drive API.

POST /upload/drive/v3/files?uploadType=media HTTP/1.1

Host: www.googleapis.

Content-Type: image/jpeg

Content-Length: number_of_bytes_in_file

Authorization: Bearer your_auth_token

The above is for JPEG data and you can add or change content types.

More can be found here: https://developers.google./drive/v3/web/manage-uploads#simple

According to me & as per Google Docs you have to add 'upload' view in the code, my code is as follows which enabled the upload tab for me:

Do not forget to change 'YOUR_DEVELOPER_KEY_HERE' with your developer key in following code:

const googleViewId = google.picker.ViewId.DOCS;

/*code to create obj of DocsUploadView for upload*/
const uploadView = new google.picker.DocsUploadView();

const docsView = new google.picker.DocsView(googleViewId)
                    .setIncludeFolders(true)
                    .setSelectFolderEnabled(true);

const picker = new window.google.picker.PickerBuilder()
                .enableFeature(google.picker.Feature.SIMPLE_UPLOAD_ENABLED)
                  .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
                    .addView(docsView)
                    .addView(uploadView) /*DocsUploadView added*/
                    .setOAuthToken(oauthToken)
                    .setDeveloperKey('YOUR_DEVELOPER_KEY_HERE')
                    .setCallback((data)=>{
                      if (data.action == google.picker.Action.PICKED) {
                          var fileId = data.docs[0].id;
                          alert('The user selected: ' + fileId);
                          picker();
                      }
                    });
picker.build().setVisible(true);

This is how it looks ;) For full code in React check this link