Download file right after picked file from google

问题:

I am just trying to implement the Google Drive Picker API in order to download file (on background) submit by a user via Google drive picker.

I did the Google picker and it worked fine but then, I just couldn't download the file. (begin with single file first).

This is my code, in my dream I could download the file right after getting the picker's file.

function createPicker() {
            if (pickerApiLoaded && oauthToken) {
            var picker = new google.picker.PickerBuilder().
                    addView(google.picker.ViewId.DOCS).
                    addView(google.picker.ViewId.PHOTOS).
                    addView(google.picker.ViewId.FOLDERS).
                    enableFeature(google.picker.Feature.MULTISELECT_ENABLED).
                    setOAuthToken(oauthToken).
                    setDeveloperKey(developerKey).
                    setCallback(pickerCallback).
                    build();
            picker.setVisible(true);
        }
    }

    // A simple callback implementation.
    function pickerCallback(data) {
        var url = 'nothing';
        if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
            var fileId = data.docs[0].id;
            var fileUrl = data.docs[0].url;
            alert('The user selected: ' + fileId);
            console.log(data.docs);
        }
        var message = 'You picked: ' + url;
        document.getElementById('result').innerHTML = message;
    }

Note that I would like to download photo and that I have no access to a "downloadUrl" field. Google Drive Picker and Drive API are "On" on my app.

Everything works fine except that I can't download the retrieving file.

回答1:

You need to get the download URL of the file using its file id. Once done you can call that URL using AJAX to get the file data. Optionally, you can send the file bytes as blob in form data to server side.

var googleSelectedFiles = new Array();

if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {

    var docs = data[google.picker.Response.DOCUMENTS];
    docs.forEach(function (file) {

        var downloadUrl;

        gapi.client.request({
            'path': '/drive/v2/files/' + file.id,
            'method': 'GET',
            callback: function (responsejs, responsetxt) {

                downloadUrl = responsejs.downloadUrl;

                var gDoxBlob = null;
                var xhr = new XMLHttpRequest();
                xhr.open("GET", downloadUrl); //file.url

                var accessToken = gapi.auth.getToken().access_token;
                xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);

                xhr.responseType = "blob";
                xhr.onload = function () {

                    gDoxBlob = xhr.response;
                    googleSelectedFiles.push({ bytes: gDoxBlob, name: file.name });
                }
                xhr.send();

            }
        });

    });

}

回答2:

I hope you're able to look file picker and you now want to download selected file, the following code is able to do so:

First modify your createPicker callback:

function pickerCallback(data) {
        var url = 'nothing';
        if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
            var fileId = data.docs[0].id;
            getDownloadurl(fileId);    //this is the custom function

        }       
    }

Then Implement getDownloadUrl:

function getDownloadUrl(fileId) {
            /*Before executing following client request you must include
                <script type="text/javascript" src="https://apis.google.com/js/client.js"></script>
            google client library*/

            var request =
                gapi.client.request({
                    'path': '/drive/v2/files/' + fileId,
                    'params': { 'maxResults': '1000' },
                    callback: function (responsejs, responsetxt) {
                            var fileDownloadUrl = responsejs.downloadUrl; //using this downloadUrl you will be able to download Drive File Successfully
                    }
                });
        }