How to get multiple selected images from Google Picker API

Question

I want to call back the thumbnail URL of selected images (multiple selected image) from Google Picker using Google Picker API (javascript). But the result only first selected image (1 image only). Anyone can help me to fix this problem?

Screenshot:

Below is my javascript API:

<!-- START PICKER -->

<button type="button" id="pick">Pick File</button>
    <pre id="fileInfo"></pre>

    <script>
(function() {
    /**
     * Initialise a Google Driver file picker
     */
    var FilePicker = window.FilePicker = function(options) {
        // Config
        this.apiKey = options.apiKey;
        this.clientId = options.clientId;

        // 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) {
                this._showPicker();
            } else {
                // The user has not yet authenticated with Google
                // We need to do the authentication before displaying the Drive picker.
                this._doAuth(false, function() { this._showPicker(); }.bind(this));
            }
        },

        /**
         * Show the file picker once authentication has been done.
         * @private
         */
        _showPicker: function() {
            var accessToken = gapi.auth.getToken().access_token;
            var view = new google.picker.DocsView();
            view.setIncludeFolders(true);
            this.picker = new google.picker.PickerBuilder()
                .enableFeature(google.picker.Feature.NAV_HIDDEN)
                .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
                .addView(google.picker.ViewId.DOCS_IMAGES)
                .setAppId(this.clientId)
                .setDeveloperKey(this.apiKey)
                .setOAuthToken(accessToken)
                .setCallback(this._pickerCallback.bind(this))
                .build()
                .setVisible(true);
        },

        /**
         * Called when a file has been selected in the Google Drive file picker.
         * @private
         */
        _pickerCallback: function(data) {
            if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
                var file = data[google.picker.Response.DOCUMENTS][0],
                    id = file[google.picker.Document.ID],
                    request = gapi.client.drive.files.get({
                        fileId: id
                    });



            request.execute(this._fileGetCallback.bind(this));




            }
        },
        /**
         * Called when file details have been retrieved from Google Drive.
         * @private
         */
        _fileGetCallback: function(file) {
            if (this.onSelect) {
                this.onSelect(file);


            }
        },

        /**
         * 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.readonly',
                immediate: immediate
            }, callback);
        }

    };
}());
</script>
    <script>
        function initPicker() {
            var picker = new FilePicker({
                apiKey: 'MY_API_KEY',
                clientId: 'MY_CLIENT_ID-0bsroe3tqbfatoiie3h3qvaqtv4q0f5c.apps.googleusercontent.com',
                buttonEl: document.getElementById('pick'),
                onSelect: function(file) {


                    console.log(file);


                    document.getElementById('fileInfo').innerHTML = file.thumbnailLink;
                }
            });
        }
    </script>
<script src="https://www.google.com/jsapi?key=MY_API_KEY"></script>
    <script src="https://apis.google.com/js/client.js?onload=initPicker"></script>

<!-- END PICKER -->

crymis · Accepted Answer · 2018-09-23 09:57:01Z

1

I see this line in your _pickerCallback method:

var file = data[google.picker.Response.DOCUMENTS][0]

Looks like copied from the Google example. Here, you always use only the first image of all selected ones. Remove the [0] and it should work.

answered Sep 23, 2018 at 9:57

crymis

612 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Teyam · Accepted Answer · 2016-10-27 08:41:13Z

0

I hope I correctly understood your concern that you were able to select multiple images but returned result is only one. If it is, please try using Document.THUMBNAILS.

With this, an array of Thumbnails which describe the attributes of a photo or video will be in the Response.DOCUMENTS field in the callback data.

Important Note: Thumbnails will not be returned if the picked items belong to Google Drive.

Hope that helps!

answered Oct 27, 2016 at 8:41

Teyam

8,1843 gold badges18 silver badges23 bronze badges

1 Comment

Kamarul Anuar Over a year ago

thanks for your answer, can you provide, how to modify my code with this? im lost

rsudip90 · Accepted Answer · 2019-02-28 12:30:11Z

Agreed with @crymis's answer. But he didn't provide the full solution.

Here is the code of pickerCallbak function:

_pickerCallback: function(data) {
    if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
        // get all selected files
        var files = data[google.picker.Response.DOCUMENTS];

        // loop over selected files 
        for (var i = 0; i < files.length; i++) {
            // get file id, and request to get the file
            var id = files[i][google.picker.Document.ID],
                request = gapi.client.drive.files.get({
                    fileId: id
                });

            // execute request for file 
            request.execute(this._fileGetCallback.bind(this));
        }
    }
},

Note: to allow multiple selection in google drive picker dialog, you need to enable that feature while building picker with the following method,

.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)

(Kamarul Anuar, which you already did, so don't worry!)

Collectives™ on Stack Overflow

How to get multiple selected images from Google Picker API

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related