The "Save to Drive" button allows users to save files to Drive from your website. For example, suppose your web site lists several instruction manuals (PDFs) that users can download. The "Save to Drive" button can be placed alongside each manual allowing users to save manuals to their My Drive.
When the user clicks the button, the file is downloaded from the data source and uploaded to Google Drive as data is received. Because the download is made in the context of the user's browser, this process allows the user to authenticate the action to save files using their established browser session.
The "Save to Drive" button supports the two most-recent versions of the following browsers:
- Internet Explorer
Add the "Save to Drive" button to a page
To create an instance of the "Save to Drive" button, add the following script to your web page:
<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>
classis a required parameter that must be set to
g-savetodriveif you are using a standard HTML tag.
data-srcis a required parameter containing the URL of the file to be saved.
- URLs can be absolute or relative.
data-srcURL can be served from the same domain, subdomain, and protocol as the domain where the button is hosted. You must use matching protocols between the page and the data source.
- 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 using Cross Origin Resource Sharing (CORS). If the button and resource are on different domains, refer to Handle buttons and resources on different domains.(#domain).
- 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.
data-filenameis a required parameter containing the name used for the save file.
data-sitenameis a required parameter containing the name of the web site providing the file.
You may place these attributes on any HTML element. However, the most commonly
used elements are
button. Each of these elements displays
slightly differently while the page is loading because the browser renders the
This script must be loaded using 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.
Use multiple buttons on a page
You can place multiple "Save to Drive" buttons on the same page. For example, you might have a button at the top and at the bottom of a long page.
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
Handle buttons and resources on different domains
If your "Save to Drive" button is on a separate page from the data source, the request to save the file must use Cross Origin Resource Sharing (CORS) to access the resource. CORS is a mechanism allowing a web application at one domain to access resources from a server at a different domain.
For example, if a "Save to Drive" 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 unless the browser can use CORS to access the resource.
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
http://example.com/page.html. If you don't
have a server to host your content, consider using
Google App Engine.
For more information, refer to your server documentation on how to enable COR from the origin serving your "Save to Drive" button. For more information on enabling your server for CORS, refer to I want to add CORS support to my server.
Enable CORS for Internet Explorer 9
By default, Internet Explorer 9 prohibits CORS for the Internet Zone. This restriction causes an XHR error when uploading to Google Drive. To enable CORS:
- Open Internet Options from either the Control Panel or the Internet Explorer 9 Tools menu.
- Click the Security tab.
- Click Custom Level.
- Scroll to the Miscellaneous section, and select Access data sources across domains.
gapi.savetodrive namespace. If you disable automatic rendering you must call one of these functions
Renders the specified container as a "Save to Drive" button widget.
Renders all "Save to Drive" tags and classes in the specified container.
This function should be used only if
Localize the "Save to Drive" button
If your web page supports a specific language, set the
variable to that language. If not set, the user's Google Drive language is used.
For available language code values, see the list of supported language codes.
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.