The "Save to Drive" button allows users to save files to Drive from yourwebsite. For example, suppose your web site lists several instructionmanuals (PDFs) that users can download. The "Save to Drive" button can beplaced 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 anduploaded to Google Drive as data is received. Becausethe download is made in the context of the user's browser, this processallows the user to authenticate the action to save files using theirestablished browser session.

Supported browsers

The "Save to Drive" button supportsthese browsers.

Add the "Save to Drive" button to a page

To create an instance of the "Save to Drive" button, add the following script toyour web page:

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

Where:

• class is a required parameter that must be set tog-savetodrive if youare using a standard HTML tag.

• data-src is a required parameter containing the URL of the file to besaved.

  • URLs can be absolute or relative.
  • Thedata-src URL can be served from the same domain, subdomain, andprotocol as the domain where the button is hosted. You must use matchingprotocols between the page and the data source.
  • Data URIs andfile:// URLs are not supported.
  • Due to the browser's same origin policy, this URL must be served fromthe same domain as the page upon which it is placed, or be accessibleusing Cross Origin Resource Sharing (CORS). If the button and resource areon different domains, refer toHandle 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 asdata-src="//example.com/files/file.pdf", which uses the appropriateprotocol based on how the hosting page was accessed.

• data-filename is a required parameter containing the name used for thesave file.

• data-sitename is a required parameter containing the name of the web siteproviding the file.

You may place these attributes on any HTML element. However, the most commonlyused elements arediv,span, orbutton. Each of these elements displaysslightly differently while the page is loading because the browser renders theelement before the "Save to Drive" JavaScript re-renders the element.

This script must be loaded using the HTTPS protocol and can be includedfrom any point on the page without restriction. You can also load the scriptasynchronously for improved performance.

If your "Save to Drive" button is on a separate page from the data source, therequest to save the file must useCross Origin Resource Sharing (CORS) to accessthe resource.CORS is a mechanism allowing a web application at one domainto access resources from a server at a different domain.

For example, if a "Save to Drive" button is placed on a page athttp://example.com/page.html, and the data source is specified asdata-src="https://otherserver.com/files/file.pdf", the button will fail toaccess the PDF unless the browser can use CORS to access the resource.

Thedata-src URL can be served from another domain but the responsesfrom the HTTP server needs to support HTTP OPTION requests andinclude the following special HTTP headers:

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

Access-Control-Allow-Origin can have the value* to allow CORS from anydomain or can alternatively specify the domains that have access to theresource via CORS, likehttp://example.com/page.html. If you don'thave a server to host your content, consider usingGoogle App Engine.

For more information, refer to your server documentation on how to enable CORSfrom the origin serving your "Save to Drive" button. For more information onenabling your server for CORS, refer toI want to add CORS support to my server.

JavaScript API

The "Save to Drive" button JavaScript defines two button-rendering functions under thegapi.savetodrive namespace. If you disable automatic rendering you must call one of these functions by settingparsetags toexplicit.

Example "Save to Drive" JavaScript with explicit load

<!DOCTYPE html><html><head><title>SavetoDriveDemo:ExplicitLoad</title><linkrel="canonical"href="http://www.example.com"><scriptsrc="https://apis.google.com/js/platform.js"asyncdefer>{parsetags:'explicit'}</script></head><body><divid="container"><divclass="g-savetodrive"data-src="//example.com/path/to/myfile.pdf"data-filename="My Statement.pdf"data-sitename="My Company Name"><div></div><scripttype="text/javascript">gapi.savetodrive.go('container');</script></body></html>

Example "Save to Drive" JavaScript with explicit render

<!DOCTYPEhtml><html><head><title>SavetoDriveDemo:ExplicitRender</title><linkrel="canonical"href="http://www.example.com"><script>window.___gcfg={parsetags:'explicit'};</script><scriptsrc="https://apis.google.com/js/platform.js"asyncdefer></script></head><body><ahref="#"id="render-link">RendertheSavetoDrivebutton</a><divid="savetodrive-div"></div><script>functionrenderSaveToDrive(){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>

Localize the "Save to Drive" button

If your web page supports a specific language, set thewindow.___gcfg.langvariable to that language. If not set, the user's Google Drive language is used.

For available language code values, see thelist of supported language codes.

<!DOCTYPEhtml><html><head><title>SavetoDriveDemo:AsyncLoadwithLanguage</title><linkrel="canonical"href="http://www.example.com"></head><body><divclass="g-savetodrive"data-src="//example.com/path/to/myfile.pdf"data-filename="My Statement.pdf"data-sitename="My Company Name"></div><scripttype="text/javascript">window.___gcfg={lang:'en-US'};</script><scriptsrc='https://apis.google.com/js/platform.js' async defer></script></body></html>

Troubleshooting

If you get an XHR error when downloading yourdata-src URL, verify thatthe resource actually exists, and that you do not have aCORS issue.

If large files are truncated to 2MB, it is likely that your server is notexposing Content-Range, likely aCORS issue.