The photos space will sunset in early January 2018. Your users can continue to access Google Photos via the drive space by enabling the Google Photos folder in My Drive in the Drive client settings

Save to Drive Button

The Save to Drive button enables your web site to allow users to save files to their Drive account from an arbitrary URL via their browser. The button is configured with a few attributes in a div tag in the HTML markup, similar to how the +1 button is created.

The following is a working example of a Save to Drive button that saves an image to your Google Drive:

Getting started

The simplest way to display a Save to Drive button on your page is to include the necessary JavaScript resource and to add the Save to Drive button tag:

<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-savetodrive"
   data-src="//example.com/path/to/myfile.pdf"
   data-filename="My Statement.pdf"
   data-sitename="My Company Name">
</div>

This script must be loaded from the HTTPS protocol and can be included from any point on the page without restriction. You can also load the script asynchronously for improved performance.

How does it work?

The technology used to upload files is similar to that used by the Google Drive web user interface. The file is downloaded to the user's browser in parts and uploaded to Google Drive as data is received.

This allows the user to save files that require some form of HTTP authentication because the download is made in the context of the user's browser.

If the user navigates away from the page before the download is complete, the data is discarded and no file is created.

Multiple buttons per page

You can place multiple buttons on the same page, for example, a Save button at the top and the bottom of a long page. If the data-src and data-filename parameters are the same for multiple buttons, saving from one button causes all similar buttons to display the same progress information. If multiple different buttons are clicked, they save sequentially.

CORS

Requests for files on different servers are subject to Cross Origin Resource Sharing (CORS) restrictions.

For example, if the button is placed on a page at http://example.com/page.html, and the data source is specified as data-src="https://otherserver.com/files/file.pdf", the button will fail to access the PDF due to the browser's same origin policy unless the browser can use CORS to access the resource.

To satisfy these restrictions, you have two choices:

  1. The data-src URL can be served from the same domain, subdomain, and protocol as the domain where the button is hosted.

    Be sure to use matching protocols between the page and the data source.

    To serve the file when the same page is served by both http and https, specify the resource without a protocol such as data-src="//example.com/files/file.pdf", which uses the appropriate protocol based on how the hosting page was accessed.

  2. The data-src URL can be served from another domain but the responses from the HTTP server needs to support HTTP OPTION requests and include the following special HTTP headers:

     Access-Control-Allow-Origin: *
     Access-Control-Allow-Headers: Range
     Access-Control-Expose-Headers: Cache-Control, Content-Encoding, Content-Range
    

    Access-Control-Allow-Origin can have the value * to allow CORS from any domain or can alternatively specify the domains that have access to the resource via CORS, like https://developers.google.com. If you don't have a server to host your content, you can consider using Google App Engine.

For more information, see your server documentation regarding how to enable CORS from the origin serving your Save to Drive button. General information on enabling your server for CORS can be found at enable-cors.org.

Customizing savetodrive tag attributes

You can customize the Save to Drive button with several attributes. You may place these attributes on any HTML element; however, the most commonly used elements are div, span, or button. Each of these elements displays slightly differently while the page is loading because the browser renders the element before the Save to Drive JavaScript re-renders the element.

class
Required parameter. If you are using a standard HTML tag, this must be set to g-savetodrive.
data-src
Required parameter. The URL of the file to be saved. URLs can be absolute or relative. Data URIs and file:// URLs are not supported. Due to the browser's same origin policy, this URL must be served from the same domain as the page upon which it is placed, or be accessible via CORS.
data-filename
Required parameter. The name used when the file is saved.
data-sitename
Required parameter. The name of the web site providing the data.

Supported browsers

The Save to Drive button supports the same browsers as Google Drive on the web. It supports the two most recent versions of the following browsers:

  • Chrome
  • Firefox
  • Safari
  • Internet Explorer (which are IE9 and IE10)

Internet Explorer 9 CORS support

By default, Internet Explorer 9 prohibits Cross Origin Resource Sharing (CORS) for the Internet Zone. This manifests as an XHR error uploading to Google Drive. To enable CORS:

  1. Open Internet Options from either the Control Panel or the Internet Explorer 9 Tools menu.
  2. Open the Security tab.
  3. Click on the Custom Level button.
  4. Scroll to the Miscellaneous section, and enable Access data sources across domains.

Deferred execution with onLoad and script tag parameters

Use the onload callback to execute widget code after all dependencies have loaded.

To specify script tag parameters, use the following syntax:

<script >
  window.___gcfg = {
    lang: 'zh-CN',
    parsetags: 'onload'
  };
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>

JavaScript API

The Save to Drive button JavaScript defines two button-rendering functions under the gapi.savetodrive namespace. You must call one of these functions if you disable automatic rendering by setting parsetags to explicit.

Method Description
gapi.savetodrive.render(
container,
parameters
)
Renders the specified container as a Save to Drive button widget.
container
The container to render as the Save to Drive button. Specify either the ID of the container (string) or the DOM element itself.
parameters
An object containing Save to Drive tag attributes as key=value pairs, without the data- prefixes. For example, {"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}.
gapi.savetodrive.go(
opt_container
)
Renders all Save to Drive tags and classes in the specified container. This function should be used only if parsetags is set to explicit, which you might do for performance reasons.
opt_container
The container containing the Save to Drive button tags to render. Specify either the ID of the container (string) or the DOM element itself. If the opt_container parameter is omitted, all Save to Drive tags on the page are rendered.

Examples

Basic page

<!DOCTYPE html>
<html>
  <head>
    <title>Save to Drive Demo: Basic Page</title>
    <link rel="canonical" href="http://www.example.com">
    <script src="https://apis.google.com/js/platform.js" async defer></script>
  </head>
  <body>
    <div class="g-savetodrive"
         data-src="//example.com/path/to/myfile.pdf"
         data-filename="My Statement.pdf"
         data-sitename="My Company Name">
    </div>
  </body>
</html>

Explicit load

<!DOCTYPE html>
<html>
  <head>
    <title>Save to Drive Demo: Explicit Load</title>
    <link rel="canonical" href="http://www.example.com">
    <script src="https://apis.google.com/js/platform.js" async defer>
      {parsetags: 'explicit'}
    </script>
  </head>
  <body>
    <div id="container">
      <div class="g-savetodrive"
         data-src="//example.com/path/to/myfile.pdf"
         data-filename="My Statement.pdf"
         data-sitename="My Company Name">
      <div>
    </div>
    <script type="text/javascript">
      gapi.savetodrive.go('container');
    </script>
  </body>
</html>

Explicit render

<!DOCTYPE html>
<html>
  <head>
    <title>Save to Drive Demo: Explicit Render</title>
    <link rel="canonical" href="http://www.example.com">
    <script>
      window.___gcfg = {
        parsetags: 'explicit'
      };
    </script>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
  </head>
  <body>
    <a href="javascript:void(0)" id="render-link">Render the Save to Drive button</a>
    <div id="savetodrive-div"></div>
    <script>
      function renderSaveToDrive() {
        gapi.savetodrive.render('savetodrive-div', {
          src: '//example.com/path/to/myfile.pdf',
          filename: 'My Statement.pdf',
          sitename: 'My Company Name'
        });
      }
      document.getElementById('render-link').addEventListener('click', renderSaveToDrive);
    </script>
  </body>
</html>

Localization

The window.___gcfg.lang variable can be set if your page supports a specific language. If not set, the user's Google Drive language will be used. For available language code values, see the list of supported language codes.

<!DOCTYPE html>
<html>
  <head>
    <title>Save to Drive Demo: Async Load with Language</title>
    <link rel="canonical" href="http://www.example.com">
  </head>
  <body>
    <div class="g-savetodrive"
         data-src="//example.com/path/to/myfile.pdf"
         data-filename="My Statement.pdf"
         data-sitename="My Company Name">
    </div>

    <script type="text/javascript">
      window.___gcfg = {
        lang: 'en-US'
      };
    </script>
    <script src = 'https://apis.google.com/js/platform.js' async defer></script>

  </body>
</html>

Troubleshooting

If you get an XHR error when downloading your data-src URL, verify that the resource actually exists, and that you do not have a CORS issue.

If the Save to Drive button works with all browsers except Internet Explorer 9, you may need to configure your browser to enable CORS, which is disabled by default.

If large files are truncated to 2MB, it is likely that your server is not exposing Content-Range, likely a CORS issue.

发送以下问题的反馈:

此网页
Drive REST API
Drive REST API