All geek questions in one place

Display documents from Google Drive on a web page

Can I display documents from my drive on a web page? I want the user to be able to click on a document and download it directly from my disk. How can I do it? Thank you for your suggestions.

+3
source share
4 answers

For an HTML / JavaScript solution, consider the following links:

https://developers.google.com/drive/quickstart-js
https://www.youtube.com/watch?v=09geUJg11iA
https://developers.google.com/drive/web/auth/web-client

Here's the easiest way to use JavaScript, most of the complexity in authorizing WebApp. The example below reads the file identifiers, names and descriptions in the folder you specify.
- go to: https://cloud.google.com/console/project and create a new project "xyz"
- Select "API and auth", disable the ones you do not need, enable the "Drive API"
- Select "Credentials",
press the "CREATE NEW CLIENT ID" button

x web application
Javascript authorized sources: " https://googledrive.com/ "
Authorized redirect URI: " https://googledrive.com/oauth2callback "

this will lead to:
Customer ID: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
Email Address: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx@developer.gserviceaccount.com
Client Secret: xxxxxxxxxxxxxxxxxxxx
URI Redirection: https://googledrive.com/oauth2callback
Javascript Origins: https://googledrive.com/

- in the code below, replace
CLIENT_ID from xxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
FOLDER_ID with the identifier that you see in the address bar of the folder,
https://drive.google.com/?tab=mo&authuser=0#folders/xxxxxxxxxxxxxxxxxxx

- run it, authorize

I don’t know if you read JS, the code can follow from bottom to top, I made it as simple as possible.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> var FOLDER_ID = '.xxxxxxxxxxxxxxxxxx'; // the folder files reside in var CLIENT_ID = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com'; var SCOPE = //'https://www.googleapis.com/auth/drive'; [ 'https://www.googleapis.com/auth/drive', 'https://www.googleapis.com/auth/drive.file', // for description, ]; function rsvpCB(resp) { var picAlbumLst = '<ul>\n'; for (i=0; i<resp.items.length; i++) picAlbumLst += ( ' <li>'+resp.items[i].id+',&nbsp;'+resp.items[i].title+',&nbsp;'+resp.items[i].description+'</li>\n'); picAlbumLst += "</ul>\n"; $('#container').append(picAlbumLst); } function rqstCB() { //test @ https://developers.google.com/drive/v2/reference/files/list var rv = gapi.client.drive.files.list({ 'q': '"'+FOLDER_ID+'" in parents and trashed = false', 'fields' : 'items(id,title,description)' //'items(id,title,description,indexableText)' }).execute(rsvpCB); } // authorization server reply function onAuthResult(authResult) { var authButton = document.getElementById('authorizeButton'); authButton.style.display = 'none'; if (authResult && !authResult.error) { // access token successfully retrieved gapi.client.load('drive', 'v2', rqstCB); } else { // no access token retrieved, force the authorization flow. authButton.style.display = 'block'; authButton.onclick = function() { checkAuth(false); } } } // check if the current user has authorized the application. function checkAuth(bNow) { gapi.auth.authorize({'client_id':CLIENT_ID, 'scope':SCOPE, 'immediate':bNow}, onAuthResult); } // called when the client library is loaded, look below function onLoadCB() { checkAuth(true); } </script> <script src="https://apis.google.com/js/client.js?onload=onLoadCB"></script> <body style="background-color: transparent;"> <input type="button" id="authorizeButton" style="display: none" value="Authorize" /> <div id="container"> </div> </body>
+3
source

The quickest and easiest solution is to insert the folder using an iframe (without the need for javascript). Obviously, this is also the least flexible solution, although you can use CSS to change the layout of the iframe content (see below).

Google Drive will not allow you to embed the URL that you usually use. It has an X-Frame-Options header set to "SAMEORIGIN", which prevents use in an iframe. Therefore, you should use the following link, which will allow you to implement:
https://drive.google.com/embeddedfolderview?id=DOCUMENT_ID#VIEW_TYPE

DOCUMENT_ID is the identifier mentioned in the regular sharing link (which looks like https://drive.google.com/folderview?id=DOCUMENT_ID ), so you can just copy this from there.

VIEW_TYPE should be a "grid" or a "list", depending on your preference.

And if you need to change the style of the iframe content, take a look at this solution .

+5
source

Here are some highlights:

  • Do you want any of the URLs to be able to see your document? You can share the document as publicly available to everyone on the Internet. In addition, you can set read access to specific folders. Just right-click the Google Doc file and select "Share" from the context menu.
  • I assume that you want people to upload your documents, even if you are not logged in. This is called “Offline Access,” and this is one of many terms that you will need to figure out to do all this with the program.
  • If you only want to give the user read access using JavaScript, jQuery, etc. The front panel is a viable option. You can also do this in PHP, it's just a matter of personal preference.
  • To do all this in code, you need to provide authorization to read your files. The oAuth2 process has several steps, and it is good to understand the main thread. Configuring the code and web pages for the initial provision of authorization and then retrieving and saving tokens can be confusing.
  • Your Google project has a parameter from which the initial authorization request starts. Is this your site. But if you want to develop and test locally, you can install Javascript Origins at http://localhost
  • How much time and how much programming experience do you have? Would it be easier to give the user a few lines of the “Manually” instruction to download the file rather than program the authorization check?
  • Placing a document on your web page is the easy part.
  • To embed a Google document on your website, go to your Google Drive, open the document and select File , then Publish to Web , and you will be given an iFrame HTML tag that can be embedded in your web page, you can change the height and width of the iFrame according to the size of the document. iFrame W3Schools Instructions
  • Downloading a document can be done very easily from the online version of the shared document by simply selecting File and then DOWNLOAD AS in the menu.
  • To get up and running quickly, just give the user a couple of lines of instructions on how to load Manual, and then see if you can program the code.
  • Provide a link to your shared document instead of programming a button and then working with the code.
  • Search Git Hub for Google Drive, you can find something there.
  • Some of the official Google code examples are much more complicated than you need, and it will take a lot of time. Code examples on the documentation pages are simpler, but almost never finish working with code examples. You will need to collect many puzzle pieces in order for them to work.
+1
source

This must be done using the Google APIs . You can search google drive php api list files on google . And also I found this and this on SO.

0
source

Source: https://habr.com/ru/post/1209321/

More articles:


All Articles