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:

[This section requires a browser that supports JavaScript and iframes.]

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:

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:

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.

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 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.

Note: The button is rendered inline. The Save to Drive button can be wrapped in
another element to make the initial layout look similar to the final layout.

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)

Important: Your web page must support either IE9 standards or IE10 standards
Document Mode.
If you are having problems with an incorrect Internet Explorer document
mode (as seen via F12 developer tools), you can force the browser to
the latest standards document mode
by adding <meta http-equiv="X-UA-Compatible" content="IE=edge">
after the <head> tag. You must include <!DOCTYPE html> as the
first line of your HTML file.

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.

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.

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.