How to image thumbnail in google picker?

I'm working with google picker.

But in picker view, the image thumbnail not showing. But I want to show the thumbnail in preview. But I can't. I'm trying this:

Here is my code:

<script type="text/javascript">

    var developerKey = "";
    var clientId = "";

    var scope = ['https://www.googleapis.com/auth/drive.file'];

    var pickerApiLoaded = false;
    var oauthToken;

    // Use the API Loader script to load google.picker and gapi.auth.
    function onApiLoad {
        gapi.load('auth', {'callback': onAuthApiLoad});
        gapi.load('picker', {'callback': onPickerApiLoad});
    });

    function onAuthApiLoad() {
        window.gapi.auth.authorize(
                {
                    'client_id': clientId,
                    'scope': scope,
                    'immediate': false
                },
                handleAuthResult);
    }

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

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

    function createPicker() {
        if (pickerApiLoaded && oauthToken) {
            var view = new google.picker.DocsView().setParent('root').setIncludeFolders(true)
            var uploadView = new google.picker.DocsUploadView().setIncludeFolders(true);

            view.setMimeTypes('image/png,image/jpeg,image/jpg');
            uploadView.setMimeTypes('image/png,image/jpeg,image/jpg');

            var picker = new google.picker.PickerBuilder().
                    addView(view).
                    addView(uploadView).
                    setOAuthToken(oauthToken).
                    setDeveloperKey(developerKey).
                    setCallback(pickerCallback).
                    build();
            picker.setVisible(true);
            setTimeout(function () {
                $('.picker-dialog').css('z-index', 10002);
            }, 10);
        }
    }

    function pickerCallback(data) {
        if (data.action == google.picker.Action.PICKED) {
            var fileId = data.docs[0].id;
            alert('You select: ' + fileId);
        }
    }
</script>

The picker select file modal showing like this:

But I want it like this:

Solution

Answer:

You need to use the drive.readonly scope rather than drive.file.

More Information:

As per the authorisation information from the OAuth consent screen, the drive.file scope will allow your application to:

View files from Google Drive that you have opened with this app or that are shared publicly

Save changes to files that you have opened with this app

Create new files in Google Drive using this app

View folders and their contents from Google Drive that you have opened with this app

Make changes to folders and their contents that you have opened with this app

Delete contents of folders that you have opened with this app

Whereas the drive.readonly scope allows your application to:

See your Google Drive files

Download your files

See the names and emails of people you share files with

The important differences here are that the drive.file scope limits your application to files that have been created with or have already been opened with the application. Without the readonly scope, the thumbnail information can not be retrieved.

Note: Obviously this does change the scope of what your application can do and this will be reflected in the OAuth consent screen shown to users.