Create your own Google Drive OAuth application to Connect to Filestack

By default, you do not need to configure anything to start uploading files from Google Drive, Filestack is ready to go out of the box. When a user logs into their Google Drive account from your site, the Filestack company application will show up. You can configure it so that your application shows up instead in order to make a more seamless experience for your customers. This is also a MUST if you are using a CNAME account. If this step is not completed prior to using CNAME in a production environment, your users will not be able to access Google Drive. Let’s get started!

  1. Go to Google API Console and choose Create New Project.

    Screenshot showing Register your application step in Google API Console

  2. Once the project is created, click on "Go To Credentials".

    Screenshot showing The API is enabled step in Google API Console

  3. On the credentials screen select Google Drive API, Web Browser (Javascript), and User Data. Then go to the next step.

    Screenshot showing The API is enabled step in Google API Console

  4. Give your client a name.

    • Enter https://www.filestackapi.com for Authorized Javascript Origins
    • Enter https://www.filestackapi.com/api/client/googledrive/authCallback/open and https://www.filestackapi.com/api/client/googledrive/authCallback/saveas for Authorized Redirect URIs.

    Note: If you are using CNAME in your Filestack implementation you will ADD your CNAME subdomain here as well.

    Screenshot showing Credentials step in Google API Console

  5. Design your oauth consent screen. This is the content your users will see when they connect to your Google Drive Application.

    • Add a privacy policy - we use this one (filestack.com/privacy-policy)

    Screenshot showing Credentials step in Google API Console

  6. Download your credentials

    • This will be a JSON file that contains your App Key and App Secret.

  7. In your Filestack developer portal click on Auth Keys under Credentials and scroll down to find the Google Drive App Key and App Secret. Enter your Client ID in the Gdrive App Key field and your Client Secret in the Gdrive App Secret field. Then click Save Auth Credentials at the bottom of the page.

    Screenshot showing Filestack Developer Portal

  8. You will not need to do anything on the Domain Verification tab.

  9. Test your Google Drive implementation by launching the filestack dialog and connecting to google drive:

    Screenshot showing Filestack Developer Portal

Google Drive is a default source, but if you are overwriting the default sources you will need to add google drive in the fromSources parameter.

client.pick({
  fromSources: ['googledrive'],
}).then(result => {
  console.log(JSON.stringify(result.filesUploaded))
})

Remember that if at any point you have difficulties, we welcome questions at support@filestack.com