Include google drive in a web application

Hello,
  I have  a web application where users should be able to upload files . I would to like then to select the file from dropbox drive.

My application is an intranet app. Can you provide an example how to implement it.

I would like to the users to select a file from drop box  and then upload and parse the file.

Thanks for your help
SiemensSENAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

KimputerCommented:
Your post title is different from your post content. Going from the content, where you mention only Dropbox, here's how to proceed: https://www.dropbox.com/developers/dropins/chooser/js
0
Ersoy HasanCommented:
This accesses Google drive as you wrote in the title
 <script type="text/javascript">
    // function which will be executed after client.js is loaded
    function handleClientLoad() {
        //authorize yourself to the user
        // first try to authorize yourself immediately(means that you already have his authorization)
        window.gapi.auth.authorize({
            //see for drive api scopes https://developers.google.com/drive/web/scopes
            scope: 'https://www.googleapis.com/auth/drive',
            client_id: 'YOUR CLIENT ID',
            immediate: true
        }, function(authResult) {
            if (authResult && !authResult.error) {
                afterAuth(authResult);
            } else {
                // No access token could be retrieved, force the authorization flow and ask for auth
                // try again with immediate false
                window.gapi.auth.authorize({
                    scope: 'https://www.googleapis.com/auth/drive',
                    client_id: 'YOUR CLIENT ID',
                    immediate: false
                }, afterAuth);
            }


        });
    }
    function afterAuth(authResult) {
        if (authResult && !authResult.error) {
            window.gapi.client.load('drive', 'v2', function(response) {
                //and now you have your api
                //see for full https://developers.google.com/drive/v2/reference/
                var request = gapi.client.drive.files.list();
                request.execute(function(response) {
                    alert(response.items);
                });
            });
        }
    }
</script>
//onload defines which function will be loaded
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>

Open in new window


If you have any more questions please ask :)
0
SiemensSENAuthor Commented:
Thanks for the help..

Sorry for confusion.. I need to support both Google drive and drop box.

is there any  restriction for Intranet application. I saw an article that says that in order to used Google drive that your application must be an Internet app..

Thanks for your help
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Ersoy HasanCommented:
Your application must have an access to internet it does not mean your application must be accessible from the net. So what I mean is you can access google api from your intranet application.
0
SiemensSENAuthor Commented:
Thanks you for your help. I get the google popup dialog and I can select file but I have download it

I get this error in the "pickerCallback" function.. can help me..

TypeError: gapi.client.drive is undefined
var request = gapi.client.drive.files.get({



here my sample code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Picker Example</title>

<script>
    function onApiLoad(){
        gapi.load('auth',{'callback':onAuthApiLoad}); 
        gapi.load('picker'); 
    }
    function onAuthApiLoad(){
        window.gapi.auth.authorize({
            'client_id':'585152983161-rbb77vrf6hp14fm0js0uf0skdr3vm4bd.apps.googleusercontent.com',
            'scope':['https://www.googleapis.com/auth/drive']
        },handleAuthResult);
    } 
    var oauthToken;
    function handleAuthResult(authResult){
        if(authResult && !authResult.error){
            oauthToken = authResult.access_token;
            createPicker();
        }
    }


    function createPicker(){    
        var picker = new google.picker.PickerBuilder()
            .addView(new google.picker.DocsView())                
            .setOAuthToken(oauthToken)
            .setCallback(pickerCallback)
            .build();
        picker.setVisible(true);
    }

    function pickerCallback(data) {
        var url = 'nothing';
        if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
          var doc = data[google.picker.Response.DOCUMENTS][0];
          url = doc[google.picker.Document.URL];
		  var fileId = data.docs[0].id;
		var request = gapi.client.drive.files.get({
			'fileId': fileId
		});
  request.execute(function(resp) {
    console.log('Title: ' + resp.title);
    console.log('Description: ' + resp.description);
    console.log('MIME type: ' + resp.mimeType);
  });

             

        }
        var message = 'You picked: ' + url;
        document.getElementById('result').innerHTML = message;
      }
</script>
  </head>
  <body>
    <div id="result"></div>
<a id="auth-button" class="google-drive-btn" href="#" onclick="onApiLoad()">Choose from Google Drive</a>
    <script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
<script src="https://apis.google.com/js/client.js"></script>
  </body>
</html>

Open in new window

0
Ersoy HasanCommented:
 if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
          var doc = data[google.picker.Response.DOCUMENTS][0];
          url = doc[google.picker.Document.URL];
		  var fileId = data.docs[0].id;
		var request = gapi.client.drive.files.get({
			'fileId': fileId
		});
  request.execute(function(resp) {
    console.log('Title: ' + resp.title);
    console.log('Description: ' + resp.description);
    console.log('MIME type: ' + resp.mimeType);
  });

             

        }
        var message = 'You picked: ' + url;
        document.getElementById('result').innerHTML = message;

Open in new window

This whole section is wrong.You cant access data this way. Here is how you should check if anything is picked:
data.action === google.picker.Action.PICKED

Open in new window

here is the data arguments structure:
{
    action: "picked",
    viewToken:["all", null, Object {}],
    docs:[ArrayofPickedDocuments]
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SiemensSENAuthor Commented:
Thanks for your help

I change the function

Now I have the File URL

 I have pass it to my WepAPI to be parse and save in c# using WebClient  but I am not sure how to get the
TokenType and.AccessToken

but I will open another ticked

Thanks again for your help
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.