Add the "Save to Drive" button

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.

Supported browsers

The "Save to Drive" button supports these browsers.

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>

Where:

  • class is a required parameter that must be set to g-savetodrive if you are using a standard HTML tag.

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

    • URLs can be absolute or relative.
    • The data-src URL 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-filename is a required parameter containing the name used for the save file.

  • data-sitename is 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 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.

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.