Show google picker inside/over modal

Question

Is there a way to show the google drive picker to be shown inside a custom modal or a div? I have a modal where there will be multiple providers user can choose e.g. google, dro

Answer 1

Ok found a solution, as mentioned in the picker reference guide there is a function PickerBuilder.toUri() which will return the URI generated by the builder. So we can use that URI and used it in our own iframe:

function createPicker() {
    var picker = new google.picker.PickerBuilder()
        .addView(google.picker.ViewId.DOCUMENTS)
        .addView(google.picker.ViewId.PRESENTATIONS)
        .addView(google.picker.ViewId.SPREADSHEETS)
        .addView(google.picker.ViewId.PDFS)

        .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
        .setAppId(appID)
        .setOAuthToken(ACCESS_TOKEN)
        .setDeveloperKey(developerKey)
        .setCallback(pickerCallback)
        .toUri();


        var iframe = $('');
        iframe.attr({
            width: 500,
            height: 500,
            src: picker
        });
        $("
").append(iframe).appendTo("#my_container");
    }