Solved

Include google drive in a web application

Posted on 2014-11-04
7
432 Views
Last Modified: 2014-11-09
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
0
Comment
Question by:SiemensSEN
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 36

Expert Comment

by:Kimputer
ID: 40421441
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
 
LVL 4

Expert Comment

by:Ersoy Hasan
ID: 40421467
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
 

Author Comment

by:SiemensSEN
ID: 40421624
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 4

Expert Comment

by:Ersoy Hasan
ID: 40421638
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
 

Author Comment

by:SiemensSEN
ID: 40428383
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
 
LVL 4

Accepted Solution

by:
Ersoy Hasan earned 500 total points
ID: 40428512
 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
 

Author Closing Comment

by:SiemensSEN
ID: 40431236
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

Featured Post

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

690 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question