Google uploader selector

Question

Google uploader selector

I am currently working on implementing a Google Drive picker that allows me to upload new local files to my Drive. The picker is functional and displaying my existing Google Drive files, but I am unable to find an "upload" button, even after adding the google.picker.DocsUploadView().

Below 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 suggestions or ideas for resolving this issue?

javascript google-picker

Answer 1

Answer №1

For the task at hand, utilize DocsUploadView.

Insert this snippet into your createPicker function:

function createPicker() {
    // Setting up a view to browse images.
    var view = new google.picker.View(google.picker.ViewId.DOCS);
    view.setMimeTypes('image/png,image/jpeg');

    // Incorporating DocsUploadView for uploading 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);
}

// Basic callback method.
function pickerCallback(data) {
    if (data.action == google.picker.Action.PICKED) {
        var fileId = data.docs[0].id;
        alert('The user selected: ' + fileId);
        createPicker();
    }
}

The visual representation will resemble this. https://i.sstatic.net/nnuzM.png

Answer 2

For the task at hand, utilize DocsUploadView.

Insert this snippet into your createPicker function:

function createPicker() {
    // Setting up a view to browse images.
    var view = new google.picker.View(google.picker.ViewId.DOCS);
    view.setMimeTypes('image/png,image/jpeg');

    // Incorporating DocsUploadView for uploading 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);
}

// Basic callback method.
function pickerCallback(data) {
    if (data.action == google.picker.Action.PICKED) {
        var fileId = data.docs[0].id;
        alert('The user selected: ' + fileId);
        createPicker();
    }
}

The visual representation will resemble this. https://i.sstatic.net/nnuzM.png

Answer 3

Answer №2

Within the documentation's demonstration, this particular line:

.enableFeature(google.picker.Feature.NAV_HIDDEN)

Serves to conceal the 'upload' button

Answer 4

Within the documentation's demonstration, this particular line:

.enableFeature(google.picker.Feature.NAV_HIDDEN)

Serves to conceal the 'upload' button

Answer 5

Answer №3

The "Upload" option can be found within the "Navigation Pane", which you can conceal using the "google.picker.Feature.NAV_HIDDEN" attribute.

Answer 6

The "Upload" option can be found within the "Navigation Pane", which you can conceal using the "google.picker.Feature.NAV_HIDDEN" attribute.

Answer 7

Answer №4

Can someone provide the missing part of the code?

An easy way to upload a file is by sending a simple upload request. This approach works best when:

-The file is small enough to be re-uploaded entirely if the connection fails. -There is no metadata to include. This could be the case if you plan to send metadata separately or if no metadata is available. To perform a simple upload, send a POST or PUT request to the method's /upload URI and add the query parameter uploadType=media. For instance:

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

The necessary HTTP headers for a simple upload request are:

-Content-Type: Specify one of the approved media data types for the method as listed in the API reference. -Content-Length: Indicate the number of bytes being uploaded. Not needed for chunked transfer encoding. Example: Simple upload

The following example demonstrates a simple upload request for the Drive API.

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

Host: www.googleapis.com

Content-Type: image/jpeg

Content-Length: number_of_bytes_in_file

Authorization: Bearer your_auth_token

The example pertains to JPEG data but content types can be adjusted or added.

To learn more, visit: https://developers.google.com/drive/v3/web/manage-uploads#simple

Answer 8

Can someone provide the missing part of the code?

An easy way to upload a file is by sending a simple upload request. This approach works best when:

-The file is small enough to be re-uploaded entirely if the connection fails. -There is no metadata to include. This could be the case if you plan to send metadata separately or if no metadata is available. To perform a simple upload, send a POST or PUT request to the method's /upload URI and add the query parameter uploadType=media. For instance:

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

The necessary HTTP headers for a simple upload request are:

-Content-Type: Specify one of the approved media data types for the method as listed in the API reference. -Content-Length: Indicate the number of bytes being uploaded. Not needed for chunked transfer encoding. Example: Simple upload

The following example demonstrates a simple upload request for the Drive API.

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

Host: www.googleapis.com

Content-Type: image/jpeg

Content-Length: number_of_bytes_in_file

Authorization: Bearer your_auth_token

The example pertains to JPEG data but content types can be adjusted or added.

To learn more, visit: https://developers.google.com/drive/v3/web/manage-uploads#simple

Answer 9

Answer №5

My understanding, based on information from Google Docs, suggests that in order to enable the upload tab, you need to incorporate the 'upload' view into your code. Here is an example of how I implemented this feature:

Be sure to replace 'YOUR_DEVELOPER_KEY_HERE' with your own developer key in the code below:

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 what the implementation looks like :) For the complete React code, you can visit this link

https://i.sstatic.net/MVePo.png

Answer 10

My understanding, based on information from Google Docs, suggests that in order to enable the upload tab, you need to incorporate the 'upload' view into your code. Here is an example of how I implemented this feature:

Be sure to replace 'YOUR_DEVELOPER_KEY_HERE' with your own developer key in the code below:

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 what the implementation looks like :) For the complete React code, you can visit this link

https://i.sstatic.net/MVePo.png

Google uploader selector

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Is it possible to hide and reveal specific form elements based on the selection of a checkbox?

Utilizing React.js for displaying a collection of items

Unable to reach the array file

Tips on building an immersive interactive panoramic website

What is the best way to connect two web workers in HTML5?

What is the best way to distribute javascript and html code across multiple elements on a webpage?

Fetch information from MySQL, create a new row for each data entry

The attribute on the label fails to trigger any action on the linked input upon clicking, due to the binding of the id and for

Facing issues with the forEach method in ReactJs when attempting to access data from an array

When there is no error, the catch block in Javascript promises is still being

Tumblr jQuery Like (utilizing rel attribute for selection)

What are some strategies to reduce the frequency of API calls even when a webpage is reloaded?

Instructions on submitting a form containing multiple select lists using the enter key

Replace Original Image with Alternate Image if Image Error Occurs Using jQuery (Bootstrap File Input)

What is the method for editing individual rows in a data table in Spring MVC when the edit button is clicked?

The mistake in npm install is when the console logs a bug that is notorious for causing npm to malfunction

Place the child atop the stacked blocks

Requesting information from a NodeJs endpoint

Issue with Vue.js devtool not appearing in browser

Enhance the appearance of specific form inputs upon modification of ng-model within the textfield using AngularJS