Google Drive SDK

Quickstart: Run a Drive app in JavaScript

Complete the steps described in the rest of this page, and in about five minutes you'll have a simple Drive app that uploads a file to Google Drive. If you like, you can view a video of Google engineers guiding you through the steps.

To run a quickstart example you'll need:

  • Access to the internet and a web browser, in order to authorize the sample app.
  • A Google account with Drive enabled.
  • An environment to run programs in your selected language.

Step 1: Enable the Drive API

If you haven't already registered your application with the Google Developers Console, then set up a project and application in the Developers Console. The system guides you through the process of choosing or creating a project and registering a new application, and it automatically activates the API for you.

If you've already registered your application with the Developers Console, then follow this procedure instead:

  1. Go to the Google Developers Console.
  2. Select a project.
  3. In the sidebar on the left, select APIs & auth. In the list of APIs, make sure the status is ON for the Drive API.
  4. In the sidebar on the left, select Credentials.

In either case, you end up on the application's credentials page.

To find your application's client ID and client secret, and set a redirect URI, expand the OAuth 2.0 Client ID section.

Take note of the Client ID as you'll need to add it to your code later.

Step 2: Set up the sample

Copy the following source code to a file name quickstart.html. In the location marked <YOUR_CLIENT_ID>, add the Client ID you created in the "Enable the Drive API" step.

<html>
  <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <script type="text/javascript">
      var CLIENT_ID = '<YOUR_CLIENT_ID>';
      var SCOPES = 'https://www.googleapis.com/auth/drive';

      /**
       * Called when the client library is loaded to start the auth flow.
       */
      function handleClientLoad() {
        window.setTimeout(checkAuth, 1);
      }

      /**
       * Check if the current user has authorized the application.
       */
      function checkAuth() {
        gapi.auth.authorize(
            {'client_id': CLIENT_ID, 'scope': SCOPES, 'immediate': true},
            handleAuthResult);
      }

      /**
       * Called when authorization server replies.
       *
       * @param {Object} authResult Authorization result.
       */
      function handleAuthResult(authResult) {
        var authButton = document.getElementById('authorizeButton');
        var filePicker = document.getElementById('filePicker');
        authButton.style.display = 'none';
        filePicker.style.display = 'none';
        if (authResult && !authResult.error) {
          // Access token has been successfully retrieved, requests can be sent to the API.
          filePicker.style.display = 'block';
          filePicker.onchange = uploadFile;
        } else {
          // No access token could be retrieved, show the button to start the authorization flow.
          authButton.style.display = 'block';
          authButton.onclick = function() {
              gapi.auth.authorize(
                  {'client_id': CLIENT_ID, 'scope': SCOPES, 'immediate': false},
                  handleAuthResult);
          };
        }
      }

      /**
       * Start the file upload.
       *
       * @param {Object} evt Arguments from the file selector.
       */
      function uploadFile(evt) {
        gapi.client.load('drive', 'v2', function() {
          var file = evt.target.files[0];
          insertFile(file);
        });
      }

      /**
       * Insert new file.
       *
       * @param {File} fileData File object to read data from.
       * @param {Function} callback Function to call when the request is complete.
       */
      function insertFile(fileData, callback) {
        const boundary = '-------314159265358979323846';
        const delimiter = "\r\n--" + boundary + "\r\n";
        const close_delim = "\r\n--" + boundary + "--";

        var reader = new FileReader();
        reader.readAsBinaryString(fileData);
        reader.onload = function(e) {
          var contentType = fileData.type || 'application/octet-stream';
          var metadata = {
            'title': fileData.name,
            'mimeType': contentType
          };

          var base64Data = btoa(reader.result);
          var multipartRequestBody =
              delimiter +
              'Content-Type: application/json\r\n\r\n' +
              JSON.stringify(metadata) +
              delimiter +
              'Content-Type: ' + contentType + '\r\n' +
              'Content-Transfer-Encoding: base64\r\n' +
              '\r\n' +
              base64Data +
              close_delim;

          var request = gapi.client.request({
              'path': '/upload/drive/v2/files',
              'method': 'POST',
              'params': {'uploadType': 'multipart'},
              'headers': {
                'Content-Type': 'multipart/mixed; boundary="' + boundary + '"'
              },
              'body': multipartRequestBody});
          if (!callback) {
            callback = function(file) {
              console.log(file)
            };
          }
          request.execute(callback);
        }
      }
    </script>
    <script type="text/javascript" src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
  </head>
  <body>
    <!--Add a file picker for the user to start the upload process -->
    <input type="file" id="filePicker" style="display: none" />
    <input type="button" id="authorizeButton" style="display: none" value="Authorize" />
  </body>
</html>

Step 3: Run the sample

  1. Publish quickstart.html to your web server and load the page in your browser.
  2. Click the Authorize button, and authorize access to Drive.
  3. Click the Choose file button. This launches a file picker that lets you select any file in your local file system to upload.

When you finish these steps, the file you selected is now stored in Google Drive. The sample prints information about the Google Drive file to the JavaScript console.

By editing the sample code to provide paths to new files and new titles, you can run a few more simple upload tests. When you're ready, you could try running some other Drive API methods such as files.list.

Optional: View a quickstart video

Videos that cover the setup and running of each quickstart sample in detail. If you'd like to see the JavaScript quickstart sample demonstrated by some of the same developers who wrote it, click play, sit back, and enjoy.

Next Steps

If your goal is to let users create and open files directly from the Drive UI using your app, see Integrate with the Drive UI. Our end-to-end Example Apps demonstrate a simple Drive UI-integrated web app.

If your goal is to expand the quickstart sample into something for your own installed application, consult the API Reference. The API Reference discusses all of the features of the Drive API, and gives samples in each language on how to use a feature.

All requests to the Drive API must be authorized by an authenticated user. To examine more authorization code and learn how to authorize requests, see Authorizing Your App with Google Drives.

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.